Question

我有四个单词，当我将鼠标悬停在第一个单词上时，我也希望第二个单词以另一种颜色亮起。

 #one {
cursor:pointer;
&:hover {
  #one {
  color:red;
  }
  #two {
  color:red;
  }
}

我以为是这样，但显然它不起作用：（

这里有一个小编码器。

http://codepen.io/denniswegereef/pen/NGWXzQ

Answer 1

我认为那就是你想要的：

#one {
  cursor:pointer;
  &:hover {
    color:red;
    ~ #two {
    color:red;
    }
  }
}

Answer 2

试试这个。

＆＃13;

body {
  background-color:#161616;
  font-size:50px;
  font-family: 'Open Sans', sans-serif;
  text-transform:uppercase;
  cursor:pointer;
 }
 #one{
   color:black;
   cursor:pointer;}
  #one:hover{
    color:red;
    }
 #two{
   color:black;
   cursor:pointer;}
  #two:hover{
    color:red;
    }
 #three{
   color:black;
   cursor:pointer;}
  #three:hover{
    color:red;
    }
 #four{
   color:black;
   cursor:pointer;}
  #four:hover{
    color:red;
    }

＆＃13;

<body>
  <div id="center">
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
    <div id="four">four</div>
  </div>  
</body>

＆＃13;

Answer 3

我认为您需要使用兄弟选择器。虽然你应该留意浏览器的兼容性。

http://caniuse.com/#feat=css-sel3

看看这支笔。

http://codepen.io/anon/pen/QjWaRj

#one {
 cursor:pointer;
 &:hover {
  color:green;
  + #two {
   color:red;
  }
 }
}

少一些项目将样式应用于不同的元素

3 个答案: