Question

当用户将鼠标悬停在某个范围内的某些文字上时，我正在尝试显示图像。我已经让它为悬停在整个div上的用户工作，但我只是想让它在整个范围内触发。这是完整的代码：

<html>
<head>
<title>gif test</title>

<style>
#gif {
    position: absolute;
    left: 50px;
    top: 120px;
    display: none;
}
#trigger:hover #gif {
    display: block;
}

</style>
</head>

<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />

<p>Hover <span id="trigger">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>

</html>

我希望它是这样的，当用户将鼠标放在＆＃34;这里＆＃34;时，图像显示，但是如果鼠标结束则不显示＆＃34; Hover＆＃34;。是否有一些特殊的跨距可以防止徘徊以同样的方式工作？或者我错误地引用了#gif div？

感谢。

Answer 1

您的CSS不正确，＃strigger; hover #gif表示#trigger的孩子：使用id gif进行悬停。这意味着您的DOM应该是：

<div id='trigger'>
   <div id='gif'><img src='img/hey.gif' /></div>
</div>

如果你想控制层次结构之外的元素的状态，受控元素不是孩子或兄弟，那么CSS不够，你需要一些javascript：

<html>
<head>
<title>gif test</title>

<style>

#gif {
    position: absolute;
    left: 50px;
    top: 120px;
    display: none;
}

#gif.show {
    display: block;
}

</style>
</head>

<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />

<p>Hover <span id="trigger" onmouseover="show()" onmouseout="hide()">here</span></p>
<div id="gif"><img src="img/hey.gif" /></div>
</body>

<script type="text/javascript">

showBox() {
       var gifbox = document.getElementById("gif");
       gifbox.classList.add("show");
}

hideBox() {
       var gifbox = document.getElementById("gif");
       gifbox.classList.remove("show");
}

</script>
</html>

Answer 2

根据j08691，我的层次结构错了。新代码：

<html>
<head>
<title>gif test</title>

<style>
#gif {
    position: absolute;
    left: 50px;
    top: 120px;
    display: none;
}
#trigger:hover + #gif {
    display: block;
}

</style>
</head>

<body style="font-family:Helvetica;">
<h1>gif test</h1>
<hr noshade />

<p>Hover <span id="trigger">here</span>
<span id="gif"><img src="img/hey.gif" /></span>
</p>

</body>
</html>

现在，图片是#trigger的兄弟（两者都有父<p>; +是兄弟选择器。）

CSS跨度悬停不起作用

2 个答案: