将鼠标悬停在图像和链接上时颜色变化答案

【问题标题】：Color change on hover over image and link将鼠标悬停在图像和链接上时颜色变化
【发布时间】：2016-08-07 10:29:03
【问题描述】：

我的网站设置大致是这样的：

<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 菜单中的链接上，则标题和图像都会受到影响，如果您将鼠标悬停在图像上，也会受到影响。我用css完成了悬停时的更改颜色-那里没问题。但无论我尝试什么，我都可以同时更改标题和图像。我如何将它们链接在一起，以便它们知道它们都必须改变颜色？

谢谢

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

没有课听起来有点累：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")
  })
})

【讨论】：

即使使用 '.menu a, .content a' 部分代码，我所有的链接都应用了这个“功能”，这是不行的。我在这里做错了吗？？
编辑：没关系，如果您在 css 文件中没有忘记 .menu 和 .content ，它就可以完美运行...

【解决方案2】：

最简单的方法是将所有锚标签 (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

【讨论】：