CSS在悬停时更改NON兄弟或子元素属性

Question

我想知道是否有能力更改不是直接子元素或元素兄弟元素的元素的CSS。

<style>

   .one:hover .two {
      color:red;
   }

</style>

<div>
   <div class="one">
      111    
   </div>
</div>

<div class="two">
   222
</div>

http://jsfiddle.net/hgd0drky/

Answer 1

除非您向两者添加父元素并使它们具有Child / Sibling关系，否则纯粹基于CSS是不可能的。

你需要javascript，但为了证明这是多么容易，我将组成CSS

http://jsfiddle.net/hgd0drky/1/

<div class="one">
   <div >
      111
   </div>

    <div class="two">
      222
   </div>
</div>

CSS

.one:hover div {color:red;}
.one:hover .two {color:red;}

这只是代码的扩展。