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多個類並在懸停上添加類

回答

相關問題