Question

当鼠标悬停在上面时，我开始编写以下代码来更改链接颜色。然后决定在文本链接旁边添加一个图标。我可以在使用JQuery悬停时更改图像。

有没有办法在悬停在任何一个上时同时更改链接颜色和图标？如果你能指出我正确的方向，我将不胜感激。

HTML

<header class="main-header">
<div class="inner">
<nav>
<a href="/url1"><img src="/icon1.gif" alt="Menu 1" border="0" class="menu_calc"></a>
<a href="/url1">MENU 1</a>
</nav>
</div>
</header>

JQuery的

$(document).ready(function() {
$(".menu_calc").hover(function() {
    $(this).attr("src","/icon1_hover.gif");
        }, function() {
    $(this).attr("src","/icon1.gif");
});
});

CSS

.main-header {
  background: #000000;
  height: 40px;
  min-width: 1200px;
  width: 100%;
}

.inner {
  margin: 0px auto;
  width: 1200px;
  max-width: 1200px;
}

.main-header nav {
  float:left;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.main-header nav a { margin-left: 10px; text-decoration: none; color: #FFFFFF;}
.main-header nav a:link { margin-left: 10px; text-decoration: none; color: #FFFFFF;}
.main-header nav a:visited { margin-left: 10px; text-decoration: none; color: #FFFFFF;}
.main-header nav a:active { margin-left: 10px; text-decoration: none; color: #FFFFFF;}
.main-header nav a:hover {text-decoration: none; color: #ff6101;}

这是我的代码： jsfiddle code

Answer 1

您可以先以多种方式隐藏图像或图标。如 ;

img { visibility:hidden; } or img{ opacity:0; }

然后将鼠标悬停在包含链接和图像的任何父级上方时;

parentElement:hover img { visibility:visible; }

或

 parentElement:hover img { opacity:1; }

parentElement:hover a { background-color:red; }

Answer 2

您是否尝试过此代码？

a {
  background-image: url('icon1.gif');
  background-repeat: no-repeat;
  padding-left: 20px; /*Image width*/
}

a:hover {
  background-image: url('icon1_hover.gif');
  color: #ff6101;
}

<a href="/url1">MENU 1</a>

带图像的文本菜单 - 在更改文本链接颜色的同时替换图像

2 个答案: