Question

我有3块图像。我想要一个css，其中悬停块A变换块C和B，悬停块B变换块A和C或悬停块C变换块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可以如下：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以将div包装在容器中，并使用容器的悬停事件来实现所需的输出。

在JSFiddle

中查看演示

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

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

外面的班级悬停效果

2 个答案: