CSS - 在 UL 中的类中调用 id 以在悬停时显示 div答案

【问题标题】：CSS - calling an id within a class in an UL to show a div on hoverCSS - 在 UL 中的类中调用 id 以在悬停时显示 div
【发布时间】：2026-01-06 18:45:02
【问题描述】：

HTML

<body>
<div class="wordsmith">
    <p>WORDSMITH: dummy text here.</p>
</div>

<div class="menu">
    <ul>
        <li><a id="wordsmith">The Wordsmith</a></li>
        <li><a id="tracksmith">The Tracksmith</a></li>
        <li><a id="nerdsmith">The Nerdsmith</a></li>
        <li><a id="family">The Family Man</li>          
    </ul>
</div>

CSS

.menu {
        background: rgba(0,0,0,0.6);
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        text-align: center;
    }

.wordsmith {
        background: rgba(0,0,0,0.6);
        max-width: 500px;
        margin: 0 auto;
        padding: 15px;
        display: none;
    }

.menu #wordsmith:hover ~ .wordsmith {
        display: block;
    }

我有一个位于页面中间的菜单，其中包含 UL 中的文本链接。我想要实现的是将鼠标悬停在其中一个菜单项上，一个带有信息的 div 将出现在顶部。我找到了here（JS Fiddle）的原始解决方案。如果我尝试在 div 和 UL 之外实现这一点，那么一切正常。一旦我将菜单项放在 div 或 UL 中，CSS 就会中断。我是否使用“.menu #wordsmith”部分正确调用了 CSS 选择器？任何帮助表示赞赏！请记住，我正在尝试严格使用 CSS 和 html，而不是 JS。谢谢。

【问题讨论】：

因为它不是 a 的兄弟，你需要使用 jQuery 或 javascript

标签： html css class hover

【解决方案1】：

AFAIK 没有前任或祖先组合器/选择器，因此这在 CSS 中是不可能的。 ~ 是通用兄弟组合子，#wordsmith 和 .wordsmith 不是兄弟，.wordsmith 是 #wordsmith 的祖先的前身。
如果你真的需要这样做，你将不得不使用 JavaScript 或重构你的 HTML。

【讨论】：

【解决方案2】：

演示 - http://jsfiddle.net/n5fzB/229/

使用 jQuery 你可以做到这一点

$("#f").hover(
  function() {
    $('.ab').css('display', 'block');
    $('.a').css('display', 'none');
  },
  function() {
    $('.ab').css('display', 'none');
    $('.a').css('display', 'block');
  }
);
$("#s").hover(
  function() {
    $('.abc').css('display', 'block');
    $('.a').css('display', 'none');
  },
  function() {
    $('.abc').css('display', 'none');
    $('.a').css('display', 'block');
  }
);

.abc,.ab {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a id="f">Show First content!</a></li>
  <li><a id="s">Show Second content!!</a></li>
</ul>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

【讨论】：

谢谢大家的回复。我现在意识到我想做的必须是父母/孩子的关系。我在此页面上的 div 不是。也许我可以通过这种方式创建一个主要的“容器”div，从技术上讲，一切都在同一个层次结构中，然后从那里开始。
不。容器 div 没有做任何事情来解决问题。我看到问题在于与#wordsmith 和.wordsmith 的关系。这些与父/子无关。

【解决方案3】：

Musa 是对的，您不能针对 #wordsmith 并使用另一个不是兄弟姐妹或孩子的元素做某事。但你可以做其他事情。（免责声明：我不喜欢使用absolute 定位，我把它当作最后的结果）但是如果这个必须只用CSS来完成......你可以把文本放在@ 987654324@ 并使用position:absolute 将其显示在您想要的上方。查看下面的小提琴以了解我的意思：

HTML

<div class="menu">
  <ul>
    <li>
        <a id="wordsmith">The Wordsmith</a>
        <p>WORDSMITH: dummy text here.</p>
    </li>
    <li>
        <a id="tracksmith">The Tracksmith</a>
        <p>TRACKSMITH: dummy text here.</p>        
    </li>
    <li>
        <a id="nerdsmith">The Nerdsmith</a>
        <p>NERDSMITH: dummy text here.</p>        
    </li>
    <li>
        <a id="family">The Family Man</a>
        <p>FAMILY: dummy text here.</p>        
    </li>          
  </ul>
</div>

CSS

.menu {
    background: rgba(0,0,0,0.6);
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    padding: 100px 0 0;
}

.wordsmith {
    background: rgba(0,0,0,0.6);
    max-width: 500px;
    margin: 0 auto;
    padding: 15px;
}

.menu ul{
    position: relative;
}

.menu li p{
    display: none;
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;  
}

.menu li a:hover + p{
    display: block;
}

FIDDLE

【讨论】：