Html Css：悬停属性未在 Google 图标上工作

Question

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

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

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 图标上工作

Html Css: Hover Property not Working on Google Icon

html

css

svg

asp.net-core-mvc

google-material-icons

Html Css：悬停 属性 未在 Google 图标上工作

Html Css: Hover Property not Working on Google Icon

html

css

svg

asp.net-core-mvc

google-material-icons

Html Css：悬停属性未在 Google 图标上工作