悬停在父元素上以显示覆盖的子元素

我有一个带有加号字体的可爱叠加图像。当我将鼠标悬停在图片上（标签）时，我想显示加号，但我不确定是否有正确的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

悬停在父元素上以显示覆盖的子元素

回答

相关问题