CSS 悬停可同时以不同的方式影响不同的元素

是否有可能（我如何）使悬停同时以不同的方式影响多个元素？

例。如果我在导航栏中滚动链接，是否可以让链接的背景改变颜色，同时让图像（位于网站上的其他地方）"倾斜"。反之亦然，所以如果我将鼠标悬停在图像上，链接的背景会改变颜色。

这是小提琴中的代码：http://jsfiddle.net/P2CkK/

<body>
<div class="col3">
    <ul class="nav">
        <div class="about">
            <li><a href="#">About Us</a></li>
        </div>
        <div class="team">
            <li><a href="#">Our Team</a></li>
        </div>
    </ul>

<div class="col3 about">
    <img src="img/black.jpg" width="200px">
</div>
<div class="col3 team">
    <img src="img/red.jpg" width="200px">
</div>

这是使用您的示例的小提琴，您可以在其中使用 jQuery 切换类以方便使用。

http://jsfiddle.net/P2CkK/6/

img.active {
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}
li.active {
    background: #BADA55;
}

$('a').hover(function() {
    $(this).parent().toggleClass('active'); //get the parent of the "a" your "li"
    $('img').toggleClass('active');
});

这是一个非常简单的示例，不应在生产环境中使用，而应更多地用于概念证明和要扩展的构建块。

这是一种使用数据属性（较少遍历）的方法（基于 Ace 的答案）（演示）

<div class="col3">
    <ul class="nav">
        <div class="about">
            <li><a href="#" data-category='about'>About Us</a>
            </li>
        </div>
        <div class="team">
            <li><a href="#" data-category='team'>Our Team</a>
            </li>
        </div>
    </ul>
</div>
<div class="col3 about">
    <img src="http://www.placecage.com/c/200/200" />
</div>
<div class="col3 team">
    <img src="http://www.placecage.com/g/200/200" />
</div>

使用此脚本：

$('a').hover(function () {
    var c = $(this).data('category');
    $('div.' + c + '>img').addClass('active');
}, function () {
    $('img.active').removeClass('active');
});

相关内容

最新更新

热门标签：