random position of divs and hover function

hover, javascript, jquery, random

Solution

Demo

Its because your div's are dynamically generated, try:

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

If you are on older versions of jquery, (>1.7), Use:

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

Problem

I've found this code to create some div randomly : ``` (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(); }); })(); ``` But I want the div turn to black on hover, one by one. ``` $(document).ready(function() { $('.destruct').hover( function(){ $('.destruct', this).css({background: '#000'}); }); }); ``` But it doesn't work... Here is a http://jsfiddle.net/q6L7C/2/

Original source