Question

我有一个使用Bootstrap构建的网站。我在导航栏中的每个链接的两侧放置一个图像。导航栏通过bootstrap /我的个人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

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

2 个答案: