CSS：在一个DIV中悬停，如何显示来自另一个DIV的信息？
[英]CSS: Hover in one DIV, how to display information from another DIV?
问题描述
Got a list with 3 items. 
有一个列表有3个项目。 Upon hovering over a item information shall be displayed. 将鼠标悬停在项目上时，将显示信息。 Works fine within same <DIV> . 在相同的<DIV> 。 How about displaying information from another <DIV> , I guess this should be possible, isn't it? 如何显示来自另一个<DIV> ，我想这应该是可能的，不是吗？
Initially only the three lisitings are displayed. 最初只显示三个lisitings。 When hovering over 'listing 2' the content of '#special' can be displayed, no problem. 当鼠标悬停在“列表2”上时，可以显示“#special”的内容，没问题。
When hovering over 'listing 3' the content of '#AlsoSpecial' is not displayed, Why?. 当鼠标悬停在“列表3”上时，“＃AlsoSpecial”的内容不会显示，为什么？ Is there a remedy? 有补救措施吗？
Sample HTML: 示例HTML：
<div id="top">
<ul>
<li class="left">listing 1</li>
<li class="center">listing 2</li>
<li class="right">listing 3</li>
<li><div id="special">
<p>bla1bla1bla1</p>
</div></li>
</ul>
</div>
<div id="content">
<div id="AlsoSpecial">
<p>bla2bla2bla2</p>
</div>
</div>
Sample CSS: CSS示例：
#top > li {display:inline;}
/*this works fine*/
div#special {display:none;}
.center:hover div#special {display:block;}
/*this does not work, WHY?*/
div#AlsoSpecial {display:none;}
.right:hover div#AlsoSpecial {display:block;}
3 个解决方案
解决方案1
3 已采纳
When an element is sibling of another one, you should use the + selector. 当一个元素是另一个元素的兄弟时，你应该使用+选择器。 So, doing this should do it.- 所以，这样做应该这样做.-
li:hover + div#special
However, note that UL elements expect only LI elements inside, adding something different is illegal and you should not. 但是，请注意，UL元素只需要内部的LI元素，添加不同的东西是非法的，你不应该这样做。
I recommend you to place the DIV element inside of the element you want to hover. 我建议您将DIV元素放在要悬停的元素内。 So a much better solution would be 所以一个更好的解决方案是
...
<li>text
<div>contents</div>
</li>
...
...styled with the CSS selector.- ...使用CSS选择器设置样式.-
li:hover > div#special
Consider also using class="special" instead of ID, if there is any posibility that you want to have more than one DIV reacting to that hover event... remember that IDs are unique and cannot be used in more than one element. 考虑使用class =“special”而不是ID，如果有任何可能性要让多个DIV对该悬停事件做出反应...请记住，ID是唯一的，不能在多个元素中使用。
If you want to make appear a div that is “unmatchable” with CSS, you would have to use Javascript, an example for doing this in Javascript here.- 如果你想使用CSS显示一个“无法匹配”的div，你必须使用Javascript，这是在Javascript中这样做的一个例子.-
var toShow = document.getElementById('alsoSpecial'),
toHover = document.getElementById('toHover'), // ...for instance.
showOrNot = function(e)
{
toShow.style.display = (e.type == 'mouseover')?
'block': 'none';
};
toHover.addEventListener('mouseover', showOrNot, 1);
toHover.addEventListener('mouseout', showOrNot, 1);
I typed the code on the fly and did not try it. 我在运行中键入代码并没有尝试。 I hope it works alright, if it does not work please let me know. 我希望它能正常工作，如果它不起作用请告诉我。
Greetings. 问候。
解决方案2
1 2011-08-29 23:55:22
It doesn't work because the div with id "AlsoSpecial" is not a child element of any element with class "right" - but you are trying to match it using the descendant selector . 它不起作用，因为id为“AlsoSpecial”的div不是任何具有“right”类的元素的子元素 - 但是您尝试使用后代选择器匹配它。
I think using standard CSS selectors you will have a hard time matching anything that is not in a "sibling" or "descendant" relationship. 我认为使用标准的CSS选择器，你将很难匹配任何不属于“兄弟”或“后代”关系的东西。
I would resort to Javascript in this case. 在这种情况下我会使用Javascript。
解决方案3
0 2011-08-31 00:39:48
Both answers provided are correct, but I decided to use the least code possible (may be a bit old fashioned) as follows: 提供的两个答案都是正确的，但我决定使用尽可能少的代码（可能有点老式）如下：
<script type="text/javascript">
/*<![CDATA[*/
function showDetails()
{document.getElementById("AlsoSpecial").style.display="block";}
function hideDetails()
{document.getElementById("AlsoSpecial").style.display="none";}
/* ]]> */
</script>
<body>
...
<a title="Display Details" href="#AlsoSpecial" rel="nofollow" onmouseover="showDetails()" onmouseout="hideDetails()">View Details</a>
...
<div id="AlsoSpecial">
<p>bla2bla2bla2</p>
</div>
</body>
Thank you both. 谢谢你俩。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.