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

Question

我真的很感谢有人的帮助，因为这让我发疯了！

所以我得到了以下两个彼此相邻的图像，并在整个页面的各个位置使用。

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

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

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

并在鼠标移出时恢复到此状态：

<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'); 
});

可能还可以进一步简化。

非常感谢大家的回答 - 谢谢！