Jquery Hover在li导航栏中交换两个图像

Question

我有一个使用 Bootstrap 构建的网站。我在导航栏中每个链接的两侧都放置了一个图像。导航栏 li a 通过引导程序/我的个人 css 具有悬停状态，当您将鼠标移动到链接附近的任意位置时，链接会改变颜色。我在链接的两边放了一个img：

<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-swap 类添加到链接旁边的图像时，它们只会在您将鼠标悬停在该图像上时发生变化，并且只有一个图像会发生变化（这对我来说很有意义）。当鼠标靠近链接并且链接发生变化时，我无法弄清楚如何使两个图像都发生变化。

Answer 1

你需要攻击 LI 才能拉动它：

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");

}

Answer 2

您正在选择类名，您应该选择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