为什么该悬停属性不起作用？它应该是隐藏的，但是当我单击图标区域时，它应该是可见的。这是隐藏的。
.testdelete {
display: inline-block;
font-family: Material Icons;
visibility: hidden;
}
.testdelete:hover .testdelete {
visibility: visible;
}
.testdelete:not(hover) .testdelete {
visibility: hidden;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="testdelete">delete</div>
最佳答案
您不能将鼠标悬停在隐藏的元素上。一种解决方案是将元素嵌套在另一个容器中。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style type="text/css">
.testdelete .insideElement{
display: inline-block;
font-family: Material Icons;
visibility: hidden;
}
.testdelete:hover .insideElement {
visibility: visible;
}
.testdelete:not(hover) .insideElement {
visibility: hidden;
}
</style>
<html>
<head>
<div class="testdelete">
<div class="insideElement">delete</div>
</div>
</head>
</html>