我很难让我的悬停与GIF连接。显然,我在文本上设置display:none
时没有显示,但我认为#witch:hover ~ text{ display:block}
确实可行。
#animcontainer {
position: relative;
margin: auto;
overflow-y: hidden;
#witch {
position: absolute;
left: 2950px;
height: 150px;
bottom: 50px;
z-index: 2` #hello {
position: absolute;
display: none;
border: 25px;
padding: 1.5rem;
background-color: orange;
left: 3100px;
font-size: 20px;
border-radius: 20px;
text-align: center;
bottom: 200px;
left: 2900px;
z-index: 1;
}
#witch:target~#hello {
display: block;
}

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="animcontainer">
<div id="hello"> text</div>
<img id="potato" src="url">
</div>
</body>
</html>
&#13;