Question

我非常感谢有人的帮助，因为这让我疯了！

所以我有两个彼此相邻的img，并在整个页面的各个地方使用。

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

当我将鼠标悬停在两个图像中的任何一个上时，我需要的是将一个.lefthover或.righthover类同时添加到左侧或右侧容器中，然后在mouseout时再次删除。所以悬停时的代码看起来如此：

<img class="curtain containerLeft lefthover" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight righthover" src="http://example.com/containerright.jpg" />

并在mouseout上恢复为：

<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />

我不希望将lefthover和righthover应用于页面上这些图像的每个实例 - 只是我已经过去的两个。

我已经接近并试了很多东西，但是只能让图像的所有实例都添加适当的类，或者只有我悬停的图像（而不是旁边的图像。

我无法弄清楚如何在同一个div中选择另一个类（我可以用.children来做，但在这个例子中这不合适）。所以我认为这可能有用：例如：

$('.curtain')
.hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".curtainLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});

任何想法或想法？

Answer 1

当纯CSS工作时，通常最好避免使用JavaScript。在这种情况下，您似乎不需要开始使用JavaScript，因为您可以使用:hover伪类。

/* Normal Styles */
.containerLeft { 
    background-color: red; 
}
.containerRight { 
    background-color: blue; 
}

/* Hover Styles */
.container:hover .containerLeft,
.container:hover .containerRight {
    background-color: yellow;
}

演示：http://jsfiddle.net/xYgm6/2/

如果您需要各自不同的样式：

.container:hover .containerLeft {
    border: 1px solid red;
}
.container:hover .containerRight {
    border: 1px solid blue;
}

演示：http://jsfiddle.net/xYgm6/3/

Answer 2

考虑将图像括在class container ..

的div中

<强> HTML

<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>
<div  class="container">
    <img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
    <img class="curtain containerRight" src="http://example.com/containerright.jpg" /> 
</div>

<强>的Javascript

$('.curtain').hover(function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').addClass('lefthover');
    $container.find('.containerRight').addClass('righthover');
}, function() {
    var $container = $(this).closest('div.container');
    $container.find('.containerLeft').removeClass('lefthover');
    $container.find('.containerRight').removeClass('righthover');
});

<强> Fiddle

Answer 3

假设所有图像都有不同的父母。这两张照片都是兄弟姐妹。

$('.containerLeft').parent().hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".containerLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});

Answer 4

由于

我不相信纯CSS选项会起作用，因为页面上有多个相同的类，以及如何每次只定位正确的两个图像。无论如何，对于ref我现在还修复了一些可行的jQuery：

$('.containerLeft').hover(function() {
    $(this).addClass('lefthover');
    $(this).next().addClass('righthover');   
}, function() {
    $(this).removeClass('lefthover');
    $(this).next().removeClass('righthover');   
});

$('.containerRight').hover(function() {
    $(this).prev().addClass('lefthover');        
    $(this).addClass('righthover');
}, function() {
    $(this).removeClass('righthover');
    $(this).prev().removeClass('lefthover'); 
});

可能会进一步简化。

我非常感谢每个人的答案 - 谢谢！

jQuery多个类并在悬停时添加类

4 个答案: