CSS悬停在一段中，改变前一段的背景 [英] CSS hover over one paragraph, change background of the previous one
问题描述
对于练习和训练CSS我试图做一些事情：
换句话说，我在尝试类似这样的事情：当我将鼠标悬停在第三段时，第二段需要获得像图片一样的颜色。
我尝试使用伪类：hover 和：在之前（或 > ， 背景至＃E7A51B 和不透明度至 0.3 但它不起作用。
HTML需要像这样：
< body>
< div class =app>
< p>第一段< / p>
< div class =active>
< p>第二段< / p>
< / div>
< br>
< div>
< p>第三段< / p>
< / div>
< / div>
< / body>
编辑：感谢大家的评论。阅读你的意见我想知道问是否有可能采用一些更通用的方法，例如：
如果我将鼠标悬停在 class =foo1元素的背景与 class =foo2得到改变？
当前CSS （Selectors Level 3）
使用当前的CSS标准，不幸的是你所尝试的是不可能的。然而，目前有什么可能？
给出以下标记：
< div class =app>
< p>第一段< / p>
< p>第二段< / p>
< p>第三段< / p>
< / div>
您可以定位处于同一级别（同一父级）的元素并跟随您的初始元素（例如：hover ）。 →演示
< pre $
/ *针对第三段的直接下降兄弟* /
p：第n类型（3）：hover + p {
color：red;
}
/ *在第二段* /
p时停留在第四段：第二类：hover〜p：第n类型（4）{
颜色：蓝色;
}
/ *将所有段落作为第一段的兄弟节点* /
p：first-of-type：hover〜p {
color：green;
}
未来（选择器级别4）
选择器级别4（很可能）会带来两项令人兴奋的新功能，可以实现，你真正想做的事：
1） - 我会称之为 - subject indicator - 让您确定您想要定位的化合物选择器的哪个元素。 / p>
！OL> LI：only-child
将只包含一个列表元素的所有有序列表（看起来很简单，但是不可能与当前的CSS）。
<2>
label：hover / for / input
会以输入元素为目标，它的对于属性是悬停的。
目前尚不支持任何浏览器，但您会发现，我们可以在css不久的将来感到兴奋，等待着我们;）
For practice and training CSS im trying to do something like:
In other words, I'm trying something like this: when I hover over third paragraph, second paragraph needs to get color like on picture.
I'm trying with pseudo-classes :hover and :before (or :after) with content attribute set to "", setting background to #E7A51B and opacity to 0.3 but It doesn't work.
HTML need to be like this:
<body>
<div class="app">
<p> First paragraph </p>
<div class="active">
<p> Second paragraph </p>
</div>
<br>
<div>
<p> Third paragraph </p>
</div>
</div>
</body>
EDIT: Thanks everyone on comments. Reading your comments I get idea to ask that is it possible some more generic approach, something like:
If I hover over element with class="foo1" background of element with class="foo2" get changed?
current CSS (Selectors Level 3)
With the current CSS standard, unfortunately what you are trying is not possible. However, what is possible at the moment?
Given the following markup:
<div class="app">
<p> First paragraph </p>
<p> Second paragraph </p>
<p> Third paragraph </p>
</div>
You can target elements that are on the same level (same parent) and follow your initial element you interact with (e.g. :hover). → Demo
/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
color:green;
}
the future (Selectors Level 4)
Selectors Level 4 will (most likely) bring two exciting new feature which can achieve, what you actually try to do:
1) The - what I would call it - subject indicator - it let's you determine, which element of the compound selector you want to target.
!OL > LI:only-child
would target all ordered lists with only have one list element (looks simple, but is not possible with current css).
2) the reference combinator:
label:hover /for/ input
would target an input element, when the label which is referencing it via it's for attribute is hovered.
At the moment this is not supported by any browser yet, but you see, we can be excited what awaits us in the near future of css;)
这篇关于CSS悬停在一段中，改变前一段的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
