Fatal编程技术网
  • html/
  • Html Css:悬停属性在Google图标上不起作用

Html Css:悬停属性在Google图标上不起作用

html css svg asp.net-core-mvc

Html Css:悬停属性在Google图标上不起作用,html,css,svg,asp.net-core-mvc,google-material-icons,Html,Css,Svg,Asp.net Core Mvc,Google Material Icons,为什么这个悬停属性不工作？它应该是隐藏的，但是当我点击图标区域时，它应该是可见的。这是卡在隐藏 .testdelete { display: inline-block; font-family: Material Icons; visibility: hidden; } .testdelete:hover .testdelete { visibility: visible; } .testdelete:not(hover) .testdelete {

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

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

.testdelete{
显示：内联块；
字体系列：材质图标；
可见性：隐藏；
}
.testdelete:hover.testdelete{
能见度：可见；
}
.testdelete:not（悬停）.testdelete{
可见性：隐藏；
}
删除
您不能将鼠标悬停在隐藏元素上。一种解决方案是将元素嵌套在另一个容器中


.testdelete.insideElement{
显示：内联块；
字体系列：材质图标；
可见性：隐藏；
}
.testdelete:hover.insideElement{
能见度：可见；
}
.testdelete:not（悬停）.insideElement{
可见性：隐藏；
}
删除

解决
可见性问题的一种方法是使用
不透明度



.testdelete{
显示：内联块；
字体系列：材质图标；
不透明度：0；
}
.testdelete:悬停{
不透明度：1；
}



删除