Question

我有一个带有加号的字体真棒叠加的图像。当我将鼠标悬停在图像（标签）上时，我想显示加号，但我不确定我是否拥有正确的CSS。当我将鼠标悬停在它上面时，加号不会显示！

这是我的代码

＆＃13;

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

＆＃13;

<a class="registerTeacherAsHost" data-event-id=@Model.SpaceEvent.YogaSpaceEventId>
  <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>

＆＃13;

Answer 1

你的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" data-event-id=@Model.SpaceEvent.YogaSpaceEventId>
    <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>

您的代码存在三个问题，

您使用的是“＆gt;”选择器，它只会选择父元素（.registerTeacherAsHost）之后的子元素（.addTeacher），在你的情况下它不起作用。
除此之外，问题出在HTML中，您在样式标记中声明了.addTeacher的CSS，浏览器将此标记中的CSS考虑在其他任何样式表中。可能有用的一件事是向!important添加a.registerTeacherAsHost:hover .addTeacher { display: block !important; }。但最好在样式表中编写样式，尽量避免使用!important。
接下来的事情是，您使用的是我之前从未听说过的display: normal，我认为浏览器也没有。 display: block完成这项工作。

这是一个小提琴：https://jsfiddle.net/5ncprd90/

希望它有所帮助！

Answer 2

您已经讨论过的 CSS 已经出现了大量错误。我正专注于快速解决方案。在HTML结构中进行了一些调整，建议您避免使用内联 CSS 。希望这是你正在寻找的。

＆＃13;

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;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<a class="registerTeacherAsHost" data-event-id=@Model.SpaceEvent.YogaSpaceEventId>
  <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>

＆＃13;

将鼠标悬停在父元素上以显示重叠的子元素

2 个答案: