i have <section> <div> inside, , need multiselect them.
with script below, can click start selection, if release mouse hover effect stays.
how can start hover on mousedown , stop on mouseup?
my code here :
var inside = $(".grid"); var button = $(".grid>div"); inside.mousedown(function() { button.hover(function() { var attribut = $(this).attr("class"); if (attribut == null) { $(this).addclass('check'); $(this).css({ "background": "green" }); } }); }) .mouseup(function() { inside.off("mousedown"); });body { display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; } .grid { display: flex; background-color: red; justify-content: space-around; flex-wrap: wrap; height: 400px; width: 400px; } .grid>div { display: flex; margin: 5px; height: 50px; width: 50px; background-color: blue; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h1>voulez vous continuez ?</h1> <section class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body>
you use flag variable mouse_down in example mousemove check state of mouse when user move if it's clicked colorize divs else nothing, check example below.
var inside = $(".grid"); var button = $(".grid>div"); var mouse_down=false; inside.mousedown(function(e){ mouse_down=true; }) .mouseup(function(){ mouse_down=false; }) .mousemove(function(e){ if(mouse_down){ var target = $(e.target); if (target.is("div")) { target.addclass('check'); target.css({ "background":"green" }); } } });body{ display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; } .grid{ display: flex; background-color: red; justify-content: space-around; flex-wrap: wrap; height: 400px; width: 400px; } .grid>div{ display: flex; margin:5px; height: 50px; width:50px; background-color: blue; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h1>voulez vous continuez ?</h1> <section class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body>
Comments
Post a Comment