html 显示图像，jQuery 不显示答案

【问题标题】：html displays image, jQuery doesn'thtml 显示图像，jQuery 不显示
【发布时间】：2013-11-29 16:11:29
【问题描述】：

我有显示图像的 html 代码：

<p class="word_set">2<span class="color_up audio" id="b1e02">and</span><span class="color_up  audio" id="b1t02">และ</span><span class="ws_dialog_icon"><img src="/templates/beez_20/images/e2tw/lamp_non-hover_20.png" alt="light bulb" height="20px" width="20px"></span></p>

我希望鼠标悬停时图像发生变化，因此在此 jquery 代码中，悬停适用于第一个文本高亮语句，没问题，但在第二个悬停语句中，图像不会随着鼠标悬停而改变：

jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery("span.color_up").hover(

    function () {
        jQuery(this).css({
            "color": "red"
        });
    },

    function () {
        jQuery(this).css({
            "color": "black"
        });
    });
    jQuery("span.ws_dialog_icon").hover(

    function () {
        jQuery(this).attr("src", "/templates/beez_20/images/e2tw/lamp_hover_20.png");
        alert("hover");
    },

    function () {
        jQuery(this).attr("src", "/templates/beez_20/images/e2tw/lamp_non-hover_20.png");
    });
});

警报显示显示正在访问第二个悬停语句。此外，当替换非悬停图像时，lamp_hover_20.png 会显示在 html 中。我看不出这里有什么问题，但它可能很明显。任何帮助，非常感谢，当然。

【问题讨论】：

标签： jquery html hover

【解决方案1】：

您试图更改span 的src，您需要在img 范围内搜索

改变这个：

jQuery("span.ws_dialog_icon").hover(
        function() {
          jQuery(this).attr("src","/templates/beez_20/images/e2tw/lamp_hover_20.png");
          alert("hover");
        },
        function() {
          jQuery(this).attr("src","/templates/beez_20/images/e2tw/lamp_non-hover_20.png");
        }
      );

到这里：

jQuery("span.ws_dialog_icon").hover(
        function() {
          jQuery(this).find('img').attr("src","/templates/beez_20/images/e2tw/lamp_hover_20.png");
          alert("hover");
        },
        function() {
          jQuery(this).find('img').attr("src","/templates/beez_20/images/e2tw/lamp_non-hover_20.png");
        }
      );

【讨论】：

【解决方案2】：

我认为 jQuery(this) 将在 jQuery("span.ws_dialog_icon") 中引用 span，而不是 img。

试试

jQuery(this).find('img').attr(..

【讨论】：