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和anchor之间插入任何元素，它将无效。替代解决方案是

$(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＆gt; 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/

在鼠标悬停时更改图像

5 个答案: