悬停在跨度/链接上的奇怪的CSS行为
[英]Strange css behaviour with hover over span/link
问题描述
I'm currently facing a problem with some css code. 
我目前遇到一些CSS代码问题。 What I'm trying to achieve is when somebody hovers on the link in #trigger , the div #hidden to show. 我试图做到的，是当有人在链接上悬停#trigger ，股利#hidden显现。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#hidden {
display: none;
position: absolute;
top: 20px;
left: 100px;
border: 1px solid red;
}
#trigger {
border: 1px solid white;
background: red;
}
#trigger:hover #hidden {
display: block !important;
}
</style>
</head>
<body>
<div id="hidden">
This hidden div.
</div>
<span id="trigger">
<a href="#">Show</a>
</span>
</body>
</html>
I'm trying to understand why the hell this code refuses to work. 我试图理解为什么该代码拒绝工作。 I have used similar code on many places and it worked just fine. 我在许多地方都使用过类似的代码，但效果很好。 What's the problem here? 这是什么问题
2 个解决方案
解决方案1
2 已采纳 2012-10-25 20:15:12
The div hidden is not in the trigger div. hidden的div不在trigger div中。
You can let your CSS code work as follows: 您可以让CSS代码按以下方式工作：
<span id="trigger">
<a href="#">Show</a>
<div id="hidden">
This hidden div.
</div>
</span>
Btw, take in considuration that the absolute positioning div ( #hidden ) will take the x and y of the upper element with an poistion: relative or absolute as the start point (0, 0). 顺便说一句，请考虑一下绝对位置div（ #hidden ）将采用以下位置的上元素的x和y poistion: relative或absolute作为起点（0，0）。 If there isn't any, then it takes the body's x and y. 如果没有，则取主体的x和y。
解决方案2
1 2012-10-25 20:16:17
Place the #hidden element inside the #trigger element and your selector will work. 放置#hidden元素里面#trigger元素和你的选择会工作。
On your selector #trigger:hover #hidden is trying to find #hidden . 在您的选择器上#trigger:hover #hidden试图找到#hidden 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.