在 css 中悬停时隐藏图标?

Question

我有一段看起来像这样的html

<div>
<i onclick="delete()" class="fa fa-times" aria-hidden="true"></i>
<object style="height:100%; width:100%;" data="https://example.com/static/img/4510119851.svg" type="image/svg+xml"></object>
</div>

在这里，我有一个 svg 图像，我以object标签和一个cross图标显示。现在，我希望图标仅在我将鼠标悬停在图像上时才显示。

我尝试像这样更改css

object i {
display: none;
}
object:hover i {
display: block;
}

但它不起作用。我做错了什么？

Answer 1

i元素是object的同级，而不是子元素。你应该像这样选择它：

object ~ i {
display: none;
}
object:hover ~ i {
display: block;
}

更新：因为i是object的前兄弟姐妹，目前没有前兄弟姐妹的选择器。 我建议将您的i移到object之后，并用position: absolute破解它的位置。

/*Positioning*/
.icon {
background: red;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
}
.parent {
padding-left: 20px;
position: relative
}
.img {
background: green;
width: 80px;
height: 80px;
}
/*The sibling selector*/
.img:hover ~ .icon {
display: block;
}
.img ~ .icon {
display: none;
}

<div class = "parent"> 
<div class = "img"> Hover Me</div>
<div class = "icon"> </div>
</div>