jQuery的悬停在导航栏李

我有一个网站我用引导内置交换两个图像。我在导航栏中的每个链接的任一侧放置图像。该导航栏李一通过引导/我个人的CSS有一个悬停状态，并且链接改变颜色，当你在任何地方移动鼠标在链接附近。我把一个img在链路的两边：jQuery的悬停在导航栏李

<li><a href="index.html"><img src="bonelefty.png"/>Home<img src="bonerighty.png"/></a>  
</li> 

<li><a href="about.html" id="about"><img src="bonelefty.png" class="img- 
swap"/>About<img src="bonerighty.png" class="img-swap"/></a></li> 

<li><a href="rates.html"><img src="bonelefty.png"/>Rates<img src="bonerighty.png"/></a> 
</li> 

<li><a href="contact.html"><img src="bonelefty.png"/>Contact<img src="bonerighty.png"/> 
</a></li>

我想添加一些jQuery的这个样子，这是我在我的网站

jQuery(function(){ 
    $(".img-swap").hover(function(){ 
     this.src = this.src.replace("bonerighty.png","bonerightw.png"); 
    }, 
    function(){ 
     this.src = this.src.replace("bonerightw.png","bonerighty.png"); 
    }); 
});

的其他地方使用。当我加入IMG交换类图像的旁边，他们只有当你将鼠标悬停在该图像变化的联系，只有一个图像的变化（这对我来说很有意义）。我无法弄清楚当鼠标靠近链接和链接改变时如何改变图像。

来源

2013-06-25 user2518391

你需要攻击李把它拉：

jQuery(function(){ 
    $("li").hover(function(){ 
     jQuery("img:first", this).attr("src","bonerightw.png"); 
     jQuery("img:last", this).attr("src","bonerighty.png"); 
    }, 
    function(){ 
     jQuery("img:first", this).attr("src","bonerightw.png"); 
     jQuery("img:last", this).attr("src","bonerightw.png"); 
    }); 
});

您还可以使用CSS这样做：

li{ 
    background-image: url("bonerighty.png"), url("bonerightw.png"); 
    background-position: left center, right center; 
} 

li:hover{ 
    background-image: url("bonerightw.png"), url("bonerighty.png"); 

}

来源

2013-06-25 02:43:56 Falci

OK这没有targ等正确的图像，并交换他们，但问题是现在右侧图像变得左侧图像boneleftw或bonelefty取决于它是否正被选中。也就是说，它正确地两边但随后开始第一个鼠标boneright交换到boneleft后保持这种方式。那么在进一步的鼠标移动过程中，骨骼都会变得僵硬，希望有所帮助。非常感谢。 – user2518391

我编辑我的答案是：增加了：第一，：最后 – Falci

现在左一个变成正确的。它已切换到错误的一边在此之后，犯规做出反应，进一步悬停和停留在bonerightw很奇怪，感谢你的帮助，请让我知道你在想什么 – user2518391

您选择的类名，则应该选择a标签或li标记。并用它来选择你的图像。其结果会是这样的：

在HTML

<ul class="img-swap"> 
<li><a href="link"><img>link<img></a></li> 
</ul>

在你的js

$('.img-swap li').hover(function(){ 
//select the images 
});

或

$('.img-swap li a').hover(function(){ 
//select the images 
});

这里是一个非常粗略的例子 - http://codepen.io/lukeocom/pen/cotAJ

来源

2013-06-25 02:46:41 lukeocom

试了一下，当我试图实施的每一面上不同的图像链接就停止了运转完全地（对图像没有悬停效果）不知道我做错了什么。 – user2518391

如果你正在改变是对图像的路径，那么它应该继续工作。我更新了不同的图像...... – lukeocom

任何运气解决你的问题的代码？ – lukeocom

jQuery的悬停在导航栏李

回答

相关问题