Question

是否可以将onmouseover属性添加到类型等于图像的输入元素？

我创建了以下代码，但它没有添加属性。

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("input").each(function(i) {
                if (this.src.indexOf('/images/icons/thumbs.png') != -1) {
                    $(this).attr({ onmouseover: "images/icons/thumbsover.png" });
                    $(this).attr({ onmouseout: "images/icons/thumbsout.png" });
                }
            });
        });
    </script>

Answer 1

您误解了onmouseover属性。

HTML中使用onmouseover属性来提供当鼠标移过元素时执行的Javascript代码。

在jQuery中，您应该使用event methods代替。

您实际上想要写下以下内容：

$(":image[src='/images/icons/thumbs.png']").hover(
    function() { this.src = 'images/icons/thumbsover.png' },
    function() { this.src = 'images/icons/thumbsout.png' }
);

有关详情，请参阅selectors。

Answer 2

这里有一些代码会给你带来理想的效果。

$(document).ready(function() {
    $("input:image[src$=thumbs.png]").hover(function() {
        $(this).attr("src", "images/icons/thumbsover.png")
    }, function(){
        $(this).attr("src", "images/icons/thumbsout.png")    
    });
});

PS。我会尝试使用纯CSS

来实现效果

Answer 3

是的，选择器确实很容易：

$('input[type=image]').mouseover(function(){
    ...
}).mouseout(function(){
    ...
});

在这种情况下，您似乎想要更改背景图片：

$('input:image[src=/images/icons/thumbs.png]').hover(function(){
    //Mouse Over
    $(this).attr('src','mouseoverimage.gif');
},
function(){
    //Mouse Out
    $(this).attr('src','mouseoutimage.gif');
});

Answer 4

有关详细信息，请参阅jQuery的选择器/ Attribute documentation。

$("input[type='image']").hover(
  function () {
    //mouseover
  },
  function () {
    // mouseout
  }
);

Answer 5

您是否尝试在用户悬停图片时更改图片来源？然后尝试以下方法：

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $("input").each(function(i) {
            if (this.src.indexOf('/images/icons/thumbs.png') != -1) {
                $(this).hover(
                  function(){ $(this).attr("src", "images/icons/thumbsover.png");},
                  function(){ $(this).attr("src", "images/icons/thumbsout.png");}
                );
            }
        });
    });
</script>

JQuery - 将onmouseover属性添加到类型等于image的输入元素

5 个答案: