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

发布于 2024-12-02 04:06:35 字数 1101 浏览 1 评论 0原文

得到了一份包含 3 项的清单。将鼠标悬停在项目上时，将显示信息。在同一个

中工作正常。显示来自另一个

的信息怎么样，我想这应该是可能的，不是吗？

最初仅显示三个列表。当将鼠标悬停在“清单 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;}

原文

Got a list with 3 items. Upon hovering over a item information shall be displayed.
Works fine within same <DIV>.
How about displaying information from another <DIV>, I guess this should be possible, isn't it?

Initially only the three lisitings are displayed.
When hovering over 'listing 2' the content of '#special' can be displayed, no problem.

When hovering over 'listing 3' the content of '#AlsoSpecial' is not displayed, Why?.
Is there a remedy?

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

#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;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

握住你手 2024-12-09 04:06:35

当一个元素是另一个元素的同级元素时，您应该使用 + 选择器。
所以，这样做应该可以做到。-

li:hover + div#special

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

我建议您将 DIV 元素放置在要悬停的元素内部。
因此，更好的解决方案是

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

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

li:hover > div#special

如果您希望拥有多个 DIV，也可以考虑使用 class="special" 而不是 ID对悬停事件做出反应...请记住，ID 是唯一的，不能在多个元素中使用。

如果你想让一个div与CSS“不匹配”，你就必须使用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);

我即时输入了代码，但没有尝试。我希望它能正常工作，如果它不起作用，请告诉我。

问候。

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.

I recommend you to place the DIV element inside of the element you want to hover.
So a much better solution would be

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

...styled with the CSS selector.-

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.

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

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.

回复收藏 0 原文

一身骄傲 2024-12-09 04:06:35

它不起作用，因为 id 为“AlsoSpecial”的 div 不是任何类为“right”的元素的子元素 - 但您试图使用后代选择器。

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

在这种情况下我会求助于 Javascript。

回复收藏 0 原文

明月夜 2024-12-09 04:06:35

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

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

谢谢你们。

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.

回复收藏 0 原文

~没有更多了~