Question

是否有可能（我将如何）以不同方式同时对多个元素进行悬停效果？

实施例。如果我要在导航栏中滚动链接，则可以让链接的背景改变颜色，同时使图像（位于网站上的其他位置）同时“倾斜”。反之亦然，如果我将鼠标悬停在图像上，链接的背景会改变颜色。

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

Answer 1

以下是使用您的示例的小提琴，您可以使用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');
});

这是一个非常简单的例子，不应该在生产环境中使用，更多的概念验证和扩展的构建块。

Answer 2

这是一种使用数据属性（较少遍历）（demo）

的方法（基于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');
});

CSS悬停以同时不同地影响不同的元素

2 个答案: