课堂外的悬停效果

苏斯·希尔

我有3个图像块。我想要一个css,将鼠标悬停在块A变换块C和B上,悬停在块B变换块A和C上,或悬停在块C变换块A和B上,您可以在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;
}
穆罕默德·乌斯曼(Mohammad Usman)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档