Question

我正在尝试制作包含产品图像（徽标）的导航。它们在正常状态下呈灰色。并且在悬停时，背景位置变化显示其着色状态。

我要添加的下一步是让活动链接显示彩色徽标，另一个链接保持正常状态。

我想通过将活动类添加到活动链接来完成图像，但我知道这对于颜色/背景颜色的变化是如何工作的。但是，当每个li都有不同的图像时，我不确定如何使它与图像一起工作。我尝试使用我知道的代码或在我的尝试中找到了几次，但它们似乎没有用。

我仍然是javascript＆amp;的初学者jquery所以请记住这一点，然后才拒绝这个问题并用downvotes否定它。之前有人投票给我，因为我没有表现出我前面的尝试，然后另一个人投了我的票。它只是没有帮助，但只会恶化我获得帮助的机会。

我被建议做一个小提琴，所以这里去了

http://jsfiddle.net/itsnamitashetty/cEzd4/5/

<script>
  var active_menu = $('nav a').click(function(){
active_menu.removeClass('active');
$(this).addClass('active');
});

</script>

它不会做同样的事情，但我希望它在链接处于活动状态时保持与悬停状态相同。

如果您看到，此代码显示活动类已添加到链接，但它拒绝应用于它的规则。

Answer 1

问题源于CSS分配的特殊性。具有唯一ID的背景位置值（例如＃crw_link）比.active的css类名更具体，因此它的背景位置将始终覆盖它。

我建议您为所有导航栏项创建更通用的样式，这样也会将背景位置移出ID css赋值。

nav a {
    width:285px;
    height:93px;
    background-position:0 0;
    background-repeat:no-repeat;
}

您现在可以将活动状态和悬停状态分配给课程作业。

nav a.active, nav a:hover {
    background-position:0 13px;
}

最后，您将每个唯一的图像指定给ID分配，如下所示：

nav a#crw_link {
    background-image:url('http://www.veseys.com/ca/en/images/products/small/10171.jpg');
}
nav a#cww_link {
    background-image:url('http://www.veseys.com/ca/en/images/products/small/10170.jpg');
}

http://jsfiddle.net/cEzd4/7/

Answer 2

如同this fiddle：

HTML：

<nav id="headnav" class="menu">    
   <ul id="navlist">                                              
       <li><a href="#div1"><img src="http://www.veseys.com/ca/en/images/products/small/10171.jpg" /></a></li>                                                
        <li><a href="#div2"><img src="http://www.veseys.com/ca/en/images/products/small/10170.jpg" /></a></li>                                             
   </ul>    
</nav>

的CSS：

nav{
    position:relative;
    height:auto;
    margin:0 auto;
}
nav ul {
    list-style:none;
    margin:0;
}
nav li { 
    position: relative;
    float: left;
}
nav img {
    opacity:.5;
    -webkit-transition:all 200ms;
    -o-transition:all 200ms;
    -moz-transition:all 200ms;
    transition:all 200ms;
}
nav li:hover img, nav img.active {
    opacity:1;
    margin-top:20px;
}
nav li a {
    display:block;
    padding: 10px;
    margin-right: 5px;
}

JS：

var active_menu = $('nav img').click(function () {
      active_menu.removeClass('active');
      $(this).addClass('active');
});

活动链接上的背景位置变化 - 基于图像的导航

2 个答案: