javascript - 课外悬停效果

Question

我有一个 3 block 图像。我想要一个 css，其中悬停 block A 变换 block C 和 B，悬停 block B 变换 block A 和 C 或悬停 block C 变换 block A 和 B You can see a demo of what i want in JSFiddle

<p>Hover over 7 and both 8 and 9 get styled.</p>
<div id="seven" class="box">7</div>
<div id="eight" class="box">8</div>
<div id="nine" class="box">9</div>

#nine:hover ~ #seven,
#seven:hover ~ .box {
    background-color: black;
    color: white;
}
#eight:hover ~ .box {
    background-color: black;
    color: white;
}
#nine:hover ~ .box {
    background-color: black;
    color: white;
}

.box {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    outline: 1px solid black;
    text-align: center;
    width: 30px;
}

Answer 1

使用 jQuery 可以实现如下:

$('.box').hover(function() {
  $('.box').not(this).addClass('hover');
}, function() {
  $('.box').removeClass('hover');  
});

.box {
  cursor: pointer;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: 5px;
  outline: 1px solid black;
  text-align: center;
  width: 30px;
}

.box.hover {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Hover over 7 and both 8 and 9 get styled.</p>
<div id="seven" class="box">7</div>
<div id="eight" class="box">8</div>
<div id="nine" class="box">9</div>