Question

我试图创建一个html文件，该文件在左浮动div中有一些名称，并且在右浮动div中有该引号。问题当然是如果我有40个名字和120个引号，那将是非常混乱的。

所以我提出让所有引号（段落）与背景颜色相同的想法。所有引号都将加载到页面上，但不会显示任何引号。当我在左边的div中悬停在莎士比亚上时，我会（p：hover {color：black;}），这样引用的文本就会变成黑色，从而可见。因此，如果你将鼠标悬停在莎士比亚上，他的段落中有一个类=“莎士比亚”，所有相同类别的段落/引号都会突然显现出来。

它不起作用，如果我只是翻过莎士比亚的段落，那个悬停的段落会变成黑色，但不会在右边的div中引用，即使他们有同一个班级而我我有：.shakespeare p：hover {...}。所以我试着将它简化为：p：hover {}，所有引号都应该变成黑色，但我只是试着看它是否有效。这也不起作用。有人有线索吗？我不是真正的javascript所以html / css是最好的。解决方案并不重要，我只是不明白为什么悬停功能只实现了悬停项目。

Answer 1

所以，由于两个不相关的div之间的谈话有困难，所以一切都必须在同一个div中。我相信这个答案正是你要找的。你应该设置display属性，这与我之前说的相反。我误解了你想要完成的事情。

就你的问题而言：

解决方案并不重要，我只是不明白为什么悬停功能只能实现悬停项目。

这取决于你如何选择它。你不能带着悬停的元素前往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

Answer 2

选择器的:hover部分是伪类。它描述了该元素的“状态”。要触发悬停状态，您需要将鼠标悬停在该元素上。通过将鼠标悬停在左侧的div上，您不会在右侧p的{{1}}上触发悬停状态。

更具体地说，在该元素上触发div状态。它不会在具有该标记，类或每个元素的每个元素上触发。例如，使用您的:hover示例，悬停将应用于您悬停的段落，而不是页面上的每个段落。

为了能够使用悬停状态来触发元素的可见性，它需要包含在被悬停的元素中。例如，采用以下示例：

p:hover

就目前而言，这将是一个具有大标题和下方的段落的块。您想为此添加悬停效果，因此当您将鼠标悬停在<div class="faq-section"> <h1 class="faq-title">I am the best of titles</h1> <p class="faq-description">There are no words to describe it.</p> </div>上时，h1会变为可见。

首先，您需要确保默认隐藏段落。

您应该使用.faq-description { display: none; }，因为它会隐藏内容，就好像它不在那里一样。从可访问性的角度来看，您不应该基于颜色隐藏内容。屏幕阅读器无法区分。但是，如果您希望隐藏段落的位置继续占用其空间，则可以使用display: none;。

现在，您要添加悬停行为。当您将鼠标悬停在此常见问题解答时，您希望影响visibility: none;的{{1}}属性。

.faq-description

以下是一个示例：JSFiddle

Answer 3

悬停功能仅影响悬停的项目，因为这是您使用伪选择器element:hover应用css的内容。换句话说，只有p元素被选中才能将样式应用于它（如果它当前正在悬停），这意味着页面上的其余p元素将不会应用相同的样式，因为他们没有被徘徊。要在项目悬停时将css应用于其他项目，您将需要

形式的内容

element:hover selector-for-element-to-change {
    color:black;
}

我可能还建议使用visibilty: hidden来隐藏元素，使用visibility: visible来显示元素。

Javascript可能是解决这个问题的最佳方法，因为实现项目的选择器通常更容易改变（仅仅因为CSS选择器的工作方式）。对于Javascript，您可以使用类似

的内容

document.getElementById("id-of-element").onmouseover=function(){
    document.getElementById("id-of-element-to-change").style.visibility = "visible";
};

鼠标离开后隐藏元素：

document.getElementById("id-of-element").onmouseout=function(){
    document.getElementById("id-of-element-to-change").style.visibility = "hidden";
};

编辑： Here is a jsfiddle with an example of the css method.

And here is a jsfiddle showing the javascript method.

悬停功能仅将更改应用于悬停项目

3 个答案:

HTML

CSS

Demo Fiddle