基于 css 的链接悬停激活/停用 div

Posted 2023-05-08

【中文标题】基于 css 的链接悬停激活/停用 div

【英文标题】：css based a link hover activate/deactivate div

【发布时间】：2011-12-08 20:59:10

【问题描述】：

知道我在链接中遗漏了什么：** http://jsfiddle.net/AnUZ7/2/ **

我正在尝试像在 Zerply 中那样制作下拉菜单

<a href="#" class="setting">Setting</a>

<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
</ul>

这里的css：

ul 
    position: absolute;
    background: orange;
    width: 10em;
    left: -999em; 


a.setting:hover ul 
    left: auto;

谢谢！

【参考方案1】：

尝试将a.setting:hover ul ... 替换为

a.setting:hover + ul,
ul.submenu:hover ...

编辑过的小提琴： http://jsfiddle.net/AnUZ7/4/

.first + .second 选择器选择.first 之后的下一个元素。.first ~ .after-first 选择器选择.first 之后的所有元素。 这些选择器不适用于 Internet Explorer 6，但希望这在 2011 年不会成为大问题。

请注意实际设计中a 与其ul 之间的（可能的）边距/填充/其他间隙！如果鼠标指针落在它们之间，菜单就会消失。

【讨论】：

啊，是的，现在出现下拉菜单，谢谢！。但问题是；当我翻过它时，下拉块消失了：/ hmmm....

ps，里面的“+”是什么？以前从未使用过：/

太棒了！多谢！！！！我花了几个小时在谷歌上搜索答案和尝试。但是您在几分钟内就提供了帮助:)