3

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

所以我有以下两个相邻的图像，并在整个页面的各个地方使用。

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

有什么想法或想法吗？

4

4 回答 4

3

当纯 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/

于 2012-11-14T20:47:57.073 回答
1

考虑到图像被包含在一个带有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');
});​

小提琴

于 2012-11-14T20:56:29.417 回答
0

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

$('.containerLeft').parent().hover(function() {
    $(".containerLeft", this).addClass('lefthover');
    $(".containerRight", this).addClass('righthover');
}, function() {
    $(".containerLeft", this).removeClass('lefthover');
    $(".containerRight", this).removeClass('righthover');
});
于 2012-11-14T20:45:39.997 回答
0

谢谢

我不相信纯 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'); 
});

可能还可以进一步简化。

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

于 2012-11-14T21:49:02.543 回答