I have a "section" with some "div" inside, and i need to multiselect them.
I try some script, but no one work. With my script, i can click, that start the selection, but if i release the mouse, the hover effect stay here.
How can i start hover on mousedown and stop it on mouseup ?
My code is 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>
do you have an idea ?