gpt4 book ai didi

HTML CSS : Hover Property not Working on Google Icon

转载 作者:行者123 更新时间:2023-11-28 16:17:46 26 4
gpt4 key购买 nike

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

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

关于HTML CSS : Hover Property not Working on Google Icon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56925388/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com