鼠标悬停时更改图像

Question

我有以下HTML：

<div id="bullets"> 
  <ul id="intrebari"> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> Frequently Asked Questions </ a> </ li> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> custumer Support </ a> </ li> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> custumer Login </ a> </ li> 
  </ ul> 
</ div> 

我想使用Jquery在鼠标上更改每个<li>的图像。 到目前为止，我管理这个：

$(document).ready(function() {
    $('#intrebari>li a').mouseover(function() {
        $(this).css('color: red')
        $('li > img').attr('src', 'images/bulletactive.png');
    });
});

但是这样做会改变所有<li>上的图像

我知道这可能是沙丘

有人可以帮忙吗

Answer 1

您的$('li > img')返回所有li子图像， .attr()将应用于所有选定图像。 有多种方法可以做到这一点。

由于您的img就在锚点之前，因此您可以使用.prev()获取它

尝试这个

$(document).ready(function() {
    $('#intrebari>li a').mouseover(function() {
        $(this).css('color: red')
        $(this).prev().attr('src', 'images/bulletactive.png');
    });
});

如果您要在img和锚之间插入任何元素，则它将不起作用。 替代解决方案是

$(this).closest("li").children("img").attr('src', 'images/bulletactive.png');

尝试关闭像这样的img标签<img src="images/bullet.png" class="li-icon"/>

Answer 2

你能试一下吗

的HTML

<div id="bullets"> 
  <ul id="intrebari"> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> Frequently Asked Questions </a> </li> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> custumer Support </a> </li> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> custumer Login </a> </li> 
  </ul> 
</div> 

JQUERY

$('#intrebari>li a').mouseover(function() {
    $(this)
    .parents('#intrebari')
    .find('a').css('color','black')
    .prev().attr('src','http://placehold.it/20/20')
    .end().end().end()
    .css('color','red').prev().attr('src','http://placehold.it/30/30');

 });

http://jsfiddle.net/Na7Nb/1/

Answer 3

尝试这个。 我已经在我的代码中应用了它，并且可以正常工作。

        $('li').mouseover(function(){
        var $this = $(this);

    // img over
        $img = $this.find('img').attr('src');               
        bg = $img.replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'').replace(/^.*\/|\.[^.]*$/g, '');
        $url ="pathToYourImage\bullet.png"; 
        $this.find('img').attr('src', '');
        $this.find('img').attr('src','"+$url+"');
        });

希望它能工作。

Answer 4

由于选择器$（'li> img'），它正在更改所有列表项上的图像。 您必须像这样使用它：$（this）.parent（）。find（'img'）。attr（'src'，'images / bulletactive.png'）;

就像一个建议一样，使用CSS可以更加轻松快捷。

Answer 5

添加了jQuery鼠标离开事件

$('#intrebari>li a').mouseover(function() { console.log('over')
            $(this).css('color','red')
            $(this).prev().attr('src', 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png');
        });
    $('#intrebari>li a').mouseleave(function() { console.log('out')
            $(this).css('color', 'blue')
            $(this).prev().attr('src','https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
        });

http://jsfiddle.net/kapilgopinath/4937t/38/