如何設置包含HTML或CSS圖標的塊的懸停？

如何設置包含HTML或CSS圖標的塊的懸停？如何設置包含HTML或CSS圖標的塊的懸停？

<!doctype html> 
<head> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
<body> 
<a class="link1" href="www.facebook.com"> 
    <div id="top_head"> 
    <i class="fa fa-home"> 
    </div> 
</a> 
<style> 
    .fa-home { 
    color: white; 
    font-size: 30px; 
    background-color: transparent; 
} 
    #top_head { 
    background-color: blue; 
    display: block; 
    position: absolute; 
    top: 20px; 
    left: 300px; 
    height: 70px; 
    width: 100px; 
} 
link1:hover { 
    background-color: black; 
    width: 200px; 
    height: 200px; 
}    
</style> 
</head> 
</body> 
</html>

下面是一個例子：

來源

2015-09-28 Maheer Ali

您在'link1：hover'選擇器的開頭忘了一個點。此外，你的HTML內外：身體永遠不會進入頭部。 –

請更好地解釋你想達到的目標以及卡住的位置 – Chris

嘗試這樣的：Demo

.fa-home { 
    color: white; 
    font-size: 30px; 
    background-color: transparent; 
    vertical-align:middle; /* added this */ 
} 
#top_head { 
    background-color: blue; 
    display: block; 
    position: absolute; 
    top: 20px; 
    left: 300px; 
    height: 40px; /* added this */ 
} 
a.link1:link, a.link1:active, a.link1:visited { /* added this */ 
    float:left; 
    display:block; 
    line-height:38px; 
    padding:0px 10px; 
    vertical-align:middle; 
    color:#fff; 
} 
a.link1:hover { 
    background-color: black; 
}

HTML：

<div id="top_head"> <a class="link1" href="#"> <i class="fa fa-home"></i> </a> 
    <a class="link1" href="#"> home </a> 
</div>

來源

2015-09-28 08:13:46

但是圖標沒有出現。如果你問我，我會發給你我所有的代碼，可能我犯了其他錯誤。我很新，所以請幫助。 –

你可以在我的演示中編輯並顯示相關代碼，所以我可以試一試:) –

http://plnkr.co/edit/6G2OgjBlRizKPCAYvBt6?p=preview這是我的代碼閱讀說明並進行更改。請！！！如果你完成了，請評論 –

如下請更新您的代碼：

.fa-home { 
 
    color: white; 
 
    font-size: 30px; 
 
    background-color: transparent; 
 
} 
 
    #top_head { 
 
    background-color: blue; 
 
    display: block; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 300px; 
 
    
 
    width: 600px; 
 
} 
 
.link1{padding:7px 9px; display:inline-block;} 
 
.link1:hover { 
 
    background-color: black; 
 
    
 
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <div id="top_head"> 
 
    <a class="link1" href="www.facebook.com"> 
 
    <i class="fa fa-home"></i> 
 
    </a> 
 
    </div>

來源

2015-09-28 08:01:40

但是不會出現圖標。如果你問我，我會發給你我所有的代碼，可能我犯了其他錯誤。我很新，所以請幫助。 –

@MaheerAli： - 是的，請分享您的代碼。 –

http://plnkr.co/edit/6G2OgjBlRizKPCAYvBt6?p=preview這是我的代碼閱讀說明並更改它。請！！！如果您填寫完整，請發表評論 –

首先，你需要把它添加到您的代碼<html>並在關閉後head標籤body開始。做出正確的

檢查下面的代碼片段..

.fa-home { 
 
    color: white; 
 
    font-size: 30px; 
 
    background-color: transparent; 
 
} 
 
#top_head { 
 
    background-color: blue; 
 
    display: block; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 300px; 
 
    width: 600px; 
 
} 
 
.link1:hover { 
 
    background-color: black; 
 
}

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<div id="top_head"> 
 
    <a class="link1" href="www.facebook.com"> 
 
    <i class="fa fa-home"></i> 
 
    </a> 
 
</div>

來源

2015-09-28 08:06:08

但圖標不會發生。如果你問我，我會發給你我所有的代碼，可能我犯了其他錯誤。我很新，所以請幫助。 –

好像你所定位懸停在錯誤的元素。

只是檢查出這個普拉克：http://plnkr.co/edit/hdHKIN?p=preview

修改link:hover這樣：

#top_head:hover { 
    background-color: black; 
    width: 200px; 
    height: 200px; 
    }

來源

2015-09-28 08:07:04 Shivi

但圖標不會發生。如果你問我，我會發給你我所有的代碼，可能我犯了其他錯誤。我很新，所以請幫助。 –

肯定Maheer ...那個武裝幫我... – Shivi

如何設置包含HTML或CSS圖標的塊的懸停？

回答

相關問題