div的随机位置和悬停功能答案

【问题标题】：random position of divs and hover functiondiv的随机位置和悬停功能
【发布时间】：2012-11-28 20:36:39
【问题描述】：

我发现这段代码可以随机创建一些 div：

(function makeDiv(){
   var divsize = ((Math.random()*100) + 50).toFixed();
   var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
   $newdiv = $('<div/>').addClass("destruct").css({
       'width':divsize+'px',
       'height':divsize+'px',
       'background-color': color
   });

   var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
   var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

   $newdiv.css({
       'position':'absolute',
       'left':posx+'px',
       'top':posy+'px',
       'display':'none'
   }).appendTo( 'body' ).fadeIn(500, function(){
      makeDiv(); 
   }); 
})();

但我希望 div 在悬停时变成黑色，一个接一个。

$(document).ready(function() {
  $('.destruct').hover( function(){
    $('.destruct', this).css({background: '#000'});
   });
});

但它不起作用......

这是http://jsfiddle.net/q6L7C/2/

【问题讨论】：

标签： javascript jquery random hover

【解决方案1】：

Demo

因为你的div是动态生成的，试试：

$(document).ready(function() {
   $(document).on('mouseover', '.destruct', function(){
      $(this).css({background: '#000'});
   });
});

如果您使用的是旧版本的 jquery (>1.7)，请使用：

$(".destruct").live("mouseover", function(){
    $(this).css({background: '#000'});
});

【讨论】：

您想在鼠标移出时恢复真实颜色吗？
不需要，但它可能对其他人有用。 :)

【解决方案2】：

有几种方法可以做到这一点。一是事件委托：

http://jsfiddle.net/q6L7C/3/

这会将绑定更改为：

$(document).on('hover', '.destruct', function(){
   $(this).css({background: '#000'});
});

...但我会尝试使用比document 更具体的选择器。

另一种解决方案是将hover（或在这种情况下为mouseover，因为它应该足够了）在创建每个div时单独绑定到每个div，但这可能会导致很多单独的事件绑定。

【讨论】：

只是我的 2ct：从 jQuery 1.8 开始不推荐使用“悬停”，取而代之的是“mouseenter mouseleave”
@devnull69 使用.hover，使用名为hover 的事件，还是两者兼而有之？
只有 "hover" 作为 "mouseenter mouseleave" 的简写，因为您只能使用此方法将一个处理程序绑定到两者。 .hover() 尚未被弃用（还）
@devnull69 好吧，我确实在我的回答中暗示应该使用mouseover（尽管mouseenter 在这种情况下会起作用）。

【解决方案3】：

您可以在创建 div 时绑定.mouseenter()，或者您可以将.mouseenter() 绑定到文档（事件委托），正如其他答案指出的那样。我会用第一种方法。 Updated demo

(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').addClass("destruct").css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    })
    // Magic happens here!
    .mouseenter(function(){
      $(this).css({background: '#000'});
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(500, function(){
       makeDiv();
    });
})();

【讨论】：