懸停在父元素上以顯示覆蓋的子元素

我有一個帶有加號字體的可愛疊加圖像。當我將鼠標懸停在圖片上（標籤）時，我想顯示加號，但我不確定是否有正確的CSS。當我將鼠標懸停在它上面時，加號不顯示！懸停在父元素上以顯示覆蓋的子元素

這裏是我的代碼

a.registerTeacherAsHost:hover { 
 
    cursor: pointer !important; 
 
    opacity: 0.4; 
 
} 
 

 
a.registerTeacherAsHost:hover > .addTeacher { 
 
    display: normal; 
 
}

<a class="registerTeacherAsHost" [email protected]> 
 
    <div class="thumbnail"> 
 
    <div> 
 
     <img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher"> 
 
     <i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i> 
 
    </div> 
 

 
    </div> 
 
</a>

來源

2017-09-26 user1186050

應該是'顯示：block'，而不是'顯示：normal' –

沒有屬性名'normal'爲'display'，用'block'，而不是！ –

真的！它出現在intelllisense列表 – user1186050

你的CSS應該是這樣的

a.registerTeacherAsHost:hover { 
    cursor: pointer !important; 
    opacity: 0.4; 
} 
a.registerTeacherAsHost .addTeacher { display: none; } 
a.registerTeacherAsHost:hover .addTeacher { 
    display: block; 
}

和HTML

<a class="registerTeacherAsHost" [email protected]> 
    <div class="thumbnail"> 
     <div> 
      <img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher"> 
      <i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i> 
     </div> 
    </div> 
</a>

有三個問題與您的代碼，

你在利用其在該情況下，你沒有按父元素（.registerTeacherAsHost）之後是「>」選擇器將只選擇子元素（.addTeacher）沒有工作。
除此之外，問題出在HTML中，您在樣式標記中聲明瞭.addTeacher的CSS，瀏覽器將此標記中的CSS考慮在任何其他樣式表中。有一件事可以奏效，就是在a.registerTeacherAsHost:hover .addTeacher { display: block !important; }上加上!important。但最好在樣式表中編寫樣式，並儘可能避免使用!important。
接下來的事情是，你使用的是我以前從未聽說過的display: normal，我認爲瀏覽器也沒有。 display: block完成這項工作。

這裏有一個小提琴：https://jsfiddle.net/5ncprd90/

希望它能幫助！

來源

2017-09-26 07:33:03

我正在使用Visual Studio，它是我開始鍵入時出現在列表中的一個選項。除此之外別無所知..但是，謝謝，這有助於解釋！ – user1186050

你的CSS已經有很多錯誤，這已經被討論過了。我專注於一個快速解決方案。對HTML結構進行了一些調整，建議您避免內聯CSS。希望這是你正在尋找的。

a.registerTeacherAsHost{ 
 
display:inline-block; 
 
} 
 

 
a.registerTeacherAsHost:hover .thumbnail img { 
 
    cursor: pointer !important; 
 
    opacity: 0.4; 
 
} 
 

 
a.registerTeacherAsHost:hover i.addTeacher { 
 
    display: block; 
 
    cursor: pointer !important; 
 
} 
 

 
.thumbnail{ 
 
position:relative; 
 
max-width:100%; 
 
} 
 

 
i.addTeacher{ 
 
display:none; 
 
z-index: 200; 
 
position: absolute; 
 
top: 35%; 
 
right: 42%; 
 
color: grey; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<a class="registerTeacherAsHost" [email protected]> 
 
    <div class="thumbnail"> 
 
     <img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher"> 
 
     <i class="addTeacher fa fa-plus fa-2x"></i> 
 
    </div> 
 
</a>

來源

2017-09-26 07:50:32

懸停在父元素上以顯示覆蓋的子元素

回答

相關問題