javascript - How can one append a div exactly in the position where the mouse is over? jQuery -
i want leave colored div trail without generating divs when page loads. want them appended when mouse on parent div , position them mouse within it.
edit: think need more precise posted code want rewrite. want same thing without generating divs become colored on mouseover when page loads create colored div when mouse on $(".container") @ current position of mouse.
thanks!
mention: script generates lots of divs - might take while page load.
$(document).ready( function() { var csize = $(".container").width() * $(".container").height(); var space = $(window).width() * $(window).height(); while ( csize * $(".container").length < space) { $("#space").append("<div class='container'></div>"); }; $(document).on("mousemove", function() { window.color = math.floor(math.random()*16777215).tostring(16); }); $(".container").on("mouseover", function() { $(this).css("background-color", "#" + window.color); }); });#space{ width: auto; height: auto; } .container { width: 15px; height: 15px; display: inline-block; float: left; border: none; }<!doctype html> <html> <head> <title> jqpractice</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jq.js" type="text/javascript"></script> <script src="sv2.js" type="text/javascript"></script> </head> <body> <div id="space"> <div class="container"> </div> </div> </body> <footer> </footer> </html>
you need use mousemoves() event data , coordinate below
$( "#target" ).mousemove(function( event ) { var msg = "handler .mousemove() called @ "; msg += event.pagex + ", " + event.pagey; console.log(msg); }); and need div css {position:absolute; width:10px; height:10px; background-color:yellow; left: event.pagex; top:event.pagey}
for more info checkout official doc jquery
Comments
Post a Comment