Question

我正在使用此代码设置鼠标悬停时图像的高度和宽度

$('#gallery').find("img").attr('height', '20px');
$('#gallery').find("img").attr('width','20px');

//所以这里默认的高度和宽度由上面的javascript改变

当mouseout如何删除鼠标悬停所设置图像的高度和宽度时

Answer 1

使用hover()：

$('#gallery').hover(
    function(){
        // mouseover
        $(this).find("img").attr({'height':'20px', 'width':'20px'});
    },
    function(){
        // mouseout
        $(this).find('img').removeAttr('height').removeAttr('width');
        /* as of jQuery 1.7, it's possible to remove multiple attributes at once:
           $(this).removeAttr('height width'); */
    });

JS Fiddle demo

JS Fiddle demo, using .removeAttr('height width')

参考文献：

hover()。
removeAttr()。

Answer 2

要恢复以前的值而不是恢复为默认值，请执行以下操作：

$("#gallery").mouseenter(function() {
   var gallery = this;

   $("img", this).each(function() {
      var prev = {
        "width": $(this).attr("width"),
        "height": $(this).attr("height")
      };

      var img = this;

      $(gallery).one("mouseleave", function() {
        $(img).attr(prev);
      });
   }).attr({'height':'20px', 'width':'20px'});
});

这将安全地存储每个图像的旧值，而不会与其他图像冲突。（即使每个图像的大小都不同，也可以。

http://jsfiddle.net/4bEfs/

Answer 3

关于mouseout尝试 $('#gallery').find("img").attr('height', 'auto'); $('#gallery').find("img").attr('width','auto');

Answer 4

如果您想处理属性，可以组合使用http://api.jquery.com/hover/和http://api.jquery.com/removeAttr/。

更灵活的解决方案可能是使用http://api.jquery.com/css/来操纵css。这样您就可以同时更改多个值。

Answer 5

试试这个：在mouseover上存储宽度和高度，然后恢复它们。

    var storeddimensions;    
    $('#gallery').hover( 
        function() {
            storeddimensions = new Array($(this).find("img").height(), $(this).find("img").width());
            $(this).find("img").attr({'height':'20px', 'width':'20px'}); 
        }, 
        function() { 
            $(this).find("img").attr({'height':storeddimensions[0] + 'px', 'width':storeddimensions [1] + 'px'}); 
        }
    );

如何删除mouseout上的attr（）值

5 个答案: