Question

列出了3个项目。将鼠标悬停在项目上时，将显示信息。在同一<DIV>内正常工作。如何显示来自另一个<DIV>的信息，我想这应该是可能的，不是吗？

最初只显示三个lisitings。当鼠标悬停在“列表2”上时，可以显示“#special”的内容，没问题。

当鼠标悬停在“列表3”上时，“＃AlsoSpecial”的内容不会显示，为什么？有补救措施吗？

示例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>

示例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;}

Answer 1

当一个元素是另一个元素的兄弟时，你应该使用+选择器。所以，这样做应该这样做.-

li:hover + div#special

但是，请注意，UL元素只需要内部的LI元素，添加不同的内容是非法的，你不应该这样做。

我建议您将DIV元素放在要悬停的元素内。所以更好的解决方案是

...
<li>text
    <div>contents</div>
</li>
...

...使用CSS选择器设置样式.-

li:hover > div#special

还要考虑使用 class =“special”而不是ID，如果有任何可能性要让多个DIV对该悬停事件做出反应...请记住ID是唯一的不能用于多个元素。

如果你想使用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);

我在运行中输入了代码而没有尝试过。我希望它能正常工作，如果它不起作用请告诉我。

问候。

Answer 2

它不起作用，因为id为“AlsoSpecial”的div不是任何具有“right”类的元素的子元素 - 但是您尝试使用descendant selector来匹配它。 / p>

我认为使用标准的CSS选择器，你很难匹配任何不属于“兄弟”或“后代”关系的东西。

在这种情况下，我会使用Javascript。

Answer 3

提供的两个答案都是正确的，但我决定使用尽可能少的代码（可能有点老式）如下：

<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>

谢谢你们两位。

CSS：在一个DIV中悬停，如何显示来自另一个DIV的信息？

3 个答案: