在基于活动链接图像的导航中改变背景位置

Background position change on active link - image based navigation

本文关键字：导航 改变 位置 背景 图像 链接 于活动 活动      更新时间：2023-09-26

我想做一个导航，有图像(标志)的产品。它们在正常状态下呈灰色。悬停时，背景位置会改变，显示它们的颜色状态。

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

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

我仍然是javascript的初学者&Jquery，所以请记住这一点，之前刚刚拒绝了这个问题，并否定了它。早些时候有人投票否决了我，因为我没有展示我之前所做的努力，然后另一个人投票否决了我。它只是没有帮助，只会增加我得到帮助的机会。

有人建议我做一个小提琴，所以这里

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

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

它不做同样的事情，但我希望它保持相同的悬停状态时，链接是活跃的。

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

这个问题源于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/

这样怎么样:

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');
});
相关文章：