Question

该悬停属性为什么不起作用？它应该是隐藏的，但是当我单击图标区域时，它应该是可见的。这是隐藏的。

x=j

Answer 1

您不能将鼠标悬停在隐藏的元素上。一种解决方案是将元素嵌套在另一个容器中。

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

Answer 2

解决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>

HTML CSS：悬停属性无法在Google图标上使用

2 个答案: