0

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

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

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

mouseout时如何去掉mouseover设置的图片高度和宽度

4

5 回答 5

3

使用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 小提琴演示。

JS Fiddle 演示，使用.removeAttr('height width').

参考：

于 2012-04-19T13:05:29.873 回答
1

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

$("#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/

于 2012-04-19T13:10:33.537 回答
0

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

于 2012-04-19T13:07:28.600 回答
0

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

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

于 2012-04-19T13:08:05.783 回答
0

试试这个：在鼠标悬停时存储宽度和高度，然后恢复它们。

    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'}); 
        }
    );
于 2012-04-19T13:09:32.937 回答