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

Fiddle

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")
  })
})

悬停在图像和链接上时颜色发生变化

2 个答案:

Fiddle