jquery - 鼠标悬停时更改图像

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 就在您的 anchor 之前，您可以使用 .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"/>