html - 悬停功能仅适用于悬停元素的更改

Question

我尝试创建一个 html 文件，该文件在左浮动 div 中包含一些名称，在右浮动 div 中包含该人的引号。当然，问题是如果我有 40 个名字和 120 个引号，那就会很困惑。

所以我想出了让所有引号(段落)的颜色与其背景颜色相同的想法。所有引用都会加载到页面上，但不会显示任何引用。当我将鼠标悬停在左侧 div 中的莎士比亚上时，我会使用 ( p:hover { color: black; } ) ，以便引用的文本变为黑色，从而可见。因此，如果您将鼠标悬停在莎士比亚上，他的段落具有 class="shakespeare"，则具有同一类别的所有段落/引用都会突然可见。

这是行不通的，如果我将鼠标悬停在莎士比亚上，则只有该段落(悬停在上面的段落)会变成黑色，但右侧 div 中的他的引言不会变黑，即使他们和我有相同的类(class)会有:.shakespeare p:hover { ... } 。所以我尝试将其简化为: p:hover { } ，所有引号都应该变成黑色，但我只是尝试看看这是否有效。这也行不通。有人知道吗？我不太喜欢 javascript，所以 html/css 是最好的。解决方案并不重要，我只是不明白为什么悬停功能只实现悬停元素。

Answer 1

因此，由于在两个不相关的 div 之间进行对话很困难，因此所有内容都必须位于同一个 div 中。我相信这个答案就是您正在寻找的。您应该设置 display 属性，这与我之前所说的相反。我误解了你想要完成的任务。

就你的问题而言:

The solution isn't really important, I just don't understand why the hover function only implements the hovered-over item.

这取决于您如何选择。您无法通过悬停元素在 DOM 树中向上移动，但可以向下移动。

因此，如果您有一些像下面这样的嵌套元素，您可以将该样式应用于任何子元素或同级元素。

HTML

<div id="people">
    <div class="person">Shakespear
        <ul class="quotes">
            <li>"We know what we are, but know not what we may be."</li>
            <li>"It is not in the stars to hold our destiny but in ourselves."</li>
            <li>"This life, which had been the tomb of his virtue and of his honour, is but a walking shadow; a poor player, that struts and frets his hour upon the stage, and then is heard no more: it is a tale told by an idiot, full of sound and fury, signifying nothing."</li>
        </ul>
    </div>
    <div class="person">Galileo
        <ul class="quotes">
            <li>"I have never met a man so ignorant that I couldn't learn something from him."</li>
            <li>"I do not feel obliged to believe that the same God who has endowed us with sense, reason, and intellect has intended us to forgo their use."</li>
            <li>“You cannot teach a man anything, you can only help him find it within himself.”</li>
        </ul>
    </div>
</div>

CSS

#people {
    position: relative;
}

.person {
    border: 1px solid red;
    width: 100px;
}

.quotes {
    display: none;
}

.person:hover .quotes {
    display: block;
    position: absolute;
    margin-left: 100px;
    top: -10px;
}

Demo Fiddle