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

所以我有以下两个坐在一起的imgs，并在整个页面的各个地方使用。

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

任何想法或想法？

来源

2012-11-14 Duncan

考虑到图像包围的DIV中与class container ..

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

来源

2012-11-14 20:56:29

假设所有对ima ges有不同的父母。并且这两个图像都是兄弟姐妹。

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

来源

2012-11-14 20:45:39 Anoop

当悬停在.containerLeft上时，这不起作用吗？所以我需要在.containerRight上悬停的重复代码？ – Duncan

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

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

来源

2012-11-14 20:47:57 Sampson

+1。完全同意，特别是当它是这样一个基本的东西 –

是的，除了.hoverleft需要顶部，左侧和底部的边界，而.hoverright需要顶部，右侧和底部的边界。所以它的两个类不相同的CSS。 – Duncan

@Duncan然后把它分成两块。 – Sampson

感谢

我不相信纯粹的CSS选择是因为多个相同类别的工作对该页面以及如何targ每次只有正确的两幅图像。无论如何，对于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'); 
});

可能可以进一步简化。

我真的很感谢大家的答案 - 谢谢！

来源

2012-11-14 21:49:02 Duncan

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

回答

相关问题