jQuery/CSS - 改變懸停在具有相同href的元素上的CSS類

我有兩個獨立的UL作爲菜單。當我懸停第一個菜單項時，我希望第二個菜單項改變文本顏色。也許一個解決方案，其鏈接與你所鏈接的鏈接具有相同的href更改css類？我怎麼能用jQuery來做到這一點？jQuery/CSS - 改變懸停在具有相同href的元素上的CSS類

<ul class="firstMenu jQueryHover"> 
<li><a href="href1">bla</a></li> 
<li><a href="href2">bla2</a></li> 
</ul> 

<ul class="secondMenu"> 
<li><a href="href1">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li> 
<li><a href="href2">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li> 
</ul>

來源

2011-09-01 Emin

你可以這樣做：

$('.firstMenu ').hover(function(){ 
    var href = $(this).attr('href'); 
    $('.secondMenu a[href='+href+']').addClass('newClass'); 
}, 
function(){ 
    var href = $(this).attr('href'); 
    $('.secondMenu a[href='+href+']').removeClass('newClass'); 
} 
);

來源

2011-09-01 08:21:14

如果你想影響所有使用相同href的聯繫，包括在上空盤旋一個：

$("a").hover(function() { 
    $("a[href='" + $(this).attr("href") + "']").addClass("yourClass"); 
}, function() { 
    $("a[href='" + $(this).attr("href") + "']").removeClass("yourClass"); 
});

這使得利用attribute name selector，找到與當前懸停的鏈接相同的href的所有鏈接。

這裏有一個工作example。

如果你想這樣做只有其他鏈接改變（而不是徘徊的），那麼你可以利用jQuery not方法來排除懸停的元素。從你的問題中不清楚你是否想要改變所有的鏈接，或者所有其他鏈接，或者所有其他鏈接，但不是當前懸停的鏈接。

$("a").hover(function() { 
    $("a[href='" + $(this).attr("href") + "']").not(this).addClass("yourClass"); 
}, function() { 
    $("a[href='" + $(this).attr("href") + "']").not(this).removeClass("yourClass"); 
});

來源

2011-09-01 08:23:19

太神奇了！謝謝！是的，這是我需要的第二個（只有第二個菜單改變）..但我怎麼能修改這個工作在類而不是，它應該添加和刪除一個類，而不是硬編碼一個CSS顏色值？ http://jsfiddle.net/HDSnC/4/ – Emin

@Emin - 再看一次，我改變了它。對不起，當從小提琴複製時將其留作'css'（我不想爲他們編寫CSS類而煩心！），但意味着將其更改爲'addClass'和'removeClass'。 –

好吧，那很好。但我的意思是，我如何使用類名作爲觸發器將兩個菜單項鍊接在一起。看看這個鏈接，你會明白我在做什麼:) http://jsfiddle.net/HDSnC/4/ – Emin

再以同樣的HREF

$("a").hover(function() { 
    $("a[href='" + $(this).attr("href") + "']").addClass("hover-class-name"); 
}, function() { 
    $("a[href='" + $(this).attr("href") + "']").removeClass("hover-class-name"); 
});

改變所有錨標籤。然而，我不明白爲什麼你想擁有與頁面上相同的href兩個環節？你有沒有想過使用類名而不是href來鏈接錨？

來源

2011-09-01 08:26:09

我想他想在鏈接懸停時爲頁面的另一部分製作動畫。 – rgin

是的。類名稱作爲觸發器而不是href屬性可能會更聰明:)我該怎麼做？ – Emin

就像上面的例子一樣，但用'class'替換'href'，參見這裏的工作示例http://jsfiddle.net/wRLG7/ –

應該很簡單：

$(".jQueryHover a").hover(function(){ 
    if($(this).hasClass("hovering")) 
     { 
     $(this).removeClass("hovering"); 
     $('a[href="'+$(this).attr('href')+'"]').removeClass("hovering"); 
     } 
    else { 
     $(this).addClass("hovering"); 
     $('a[href="'+$(this).attr('href')+'"]').addClass("hovering"); 
    } 
});

Example

來源

2011-09-01 08:30:45 Nivas

jQuery/CSS - 改變懸停在具有相同href的元素上的CSS類

回答

相關問題