Question

我试图这样做，但是如本demonstration所示，它似乎不起作用。

CSS代码：

div {
    background-color: yellow;
    padding: 20px;
    display: block;
}

div:hover {
    display: none;
}

所以我们必须使用javascript吗？

Answer 1

您可以使用opacity:0;代替display:none;。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: yellow;
    padding: 20px;
    display: block;
}
    
div:hover {
    opacity: 0;
}
</style>
</head>
<body>

<span>Hover over me!</span>
<div>I will show on hover</div>

</body>
</html>

Answer 2

是的。 CSS非常严格，您必须首先了解父子关系。

进行设置，以便将鼠标悬停在父级上时会隐藏子级。操作方式：如果隐藏该元素，您将不再将鼠标悬停在该元素上，因此它会重新出现，并且CSS无法决定要做什么。

另一个注意事项：在这种情况下，如果您使用display: none，它仍然会停滞，因为它将改变父级的大小。我用visibility: hidden来解决这个问题。

https://www.w3schools.com/code/tryit.asp?filename=FVART8OA0CWY

.hide_hover:hover span{ visibility: hidden; }意味着具有span类父级的hide_hover会在父级悬停时隐藏。

是否可以通过仅将鼠标悬停在CSS和HTML上来使该组件消失？

2 个答案: