懸停在圖像和鏈接上時顏色發生變化

Question

我的網站設置大致如下：

<div class="sidebar">
<div class="menu">
<ul>
<li><a href="image1.html">Image title 1</a></li>
<li><a href="image2.html">Image title 2</a></li>
<li><a href="image3.html">Image title 3</a></li>
</ul>
</div>
</div>

<div class="content">
<a href="image1.html"><img src="image1.jpg" /></a>
<a href="image2.html"><img src="image2.jpg" /></a>
<a href="image3.html"><img src="image3.jpg" /></a>
</div>

我需要的是一種在懸停在標題或圖像上時改變相應圖像的圖像標題和圖像邊界的顏色的方法。 因此，如果將鼠標懸停在image1菜單中的鏈接上，標題和圖像都會受到影響，如果將鼠標懸停在圖像上則相同。 我用hss完成了懸停的變色 - 沒有問題。 但無論我嘗試什么，我都可以同時改變標題和圖像。 如何將它們鏈接在一起，以便它們知道它們都必須改變顏色？

謝謝

Answer 1

最簡單的方法是將所有錨標簽（ a ）綁定在一起，因此當您懸停時，具有相同href所有其他錨將被賦予相同的類（ hover ）。

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

小提琴

Answer 2

Withoud類聽起來有點害怕： https ：//fiddle.jshell.net/g0wsywaj/

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