HTML CSS:悬停在Google图标上不起作用

该悬停属性如何不起作用？它应该被隐藏，但是当我单击图标区域时，应该可以看到它。这被困在隐藏中。

.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>

围绕visibility问题的一种方法是使用opacity。

.testdelete {
  display: inline-block;
  font-family: Material Icons;
  opacity: 0;
}
.testdelete:hover {
  opacity: 1;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="testdelete">delete</div>

相关内容

最新更新

热门标签：