hinzufügen Klasse auf alle Elemente, die Maus schwebte, während Maus

Question

geklickt habe ich drei Boxen:

div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 

 
div.selected, 
 
div:hover { 
 
    background-color: red; 
 
    color: white; 
 
}

<div>A</div> 
 
<div>B</div> 
 
<div>C</div>

Und ich würde in einer der Boxen klicken mögen, und während ich bin mit Die Maus hat geklickt und zu anderen Kästchen verschoben. Das div wird die "ausgewählten" Klassen hinzufügen. Ist das möglich?

Danke.

Answer 1

jQueryUI $.selectable() tut dies gut https://jqueryui.com/selectable/

$(function() { 
 
    $("#selectable").selectable(); 
 
});

#feedback { 
 
    font-size: 1.4em; 
 
} 
 

 
#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 

 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 

 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 

 
#selectable li { 
 
    margin: 3px; 
 
    padding: 0.4em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<ol id="selectable"> 
 
    <li class="ui-widget-content">Item 1</li> 
 
    <li class="ui-widget-content">Item 2</li> 
 
    <li class="ui-widget-content">Item 3</li> 
 
    <li class="ui-widget-content">Item 4</li> 
 
    <li class="ui-widget-content">Item 5</li> 
 
    <li class="ui-widget-content">Item 6</li> 
 
    <li class="ui-widget-content">Item 7</li> 
 
</ol>

Answer 2

$('.choice').click(function() { 
 
$(this).addClass('selected'); 
 
});

div { 
 
display: inline-block; 
 
width: 50px; 
 
height: 50px; 
 
border: 1px solid #000; 
 
} 
 

 
div:hover { 
 

 
background: red; 
 
} 
 

 
.selected { 
 
background: red; 
 
border: 3px solid green; 
 
color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="choice">A</div> 
 
<div class="choice">B</div> 
 
<div class="choice">C</div>

Answer 3

Sie können die Klasse selected auf Mausklick mit jQuery toggleClass() mich hinzufügen und entfernen thod. Wenn Sie dem Element dauerhaft die Klasse selected hinzufügen möchten, verwenden Sie stattdessen die Methode addClass().

$(function(){ 
 
    $("div").click(function(){ 
 
    $(this).toggleClass("selected"); 
 
    }); 
 
});

div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 

 
div.selected, 
 
div:hover { 
 
    background-color: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>A</div> 
 
<div>B</div> 
 
<div>C</div>

Answer 4

$(document).on('click','div',function(e){ 
    $(this).toggleClass('sel'); 
}); 

Arbeits Geige:

https://jsfiddle.net/hrvn8y1d/

Answer 5

Wenn ich Ihre Frage bekommen dann wollen Sie so etwas wie, unter dem eine reine CSS Weg sein wird. Fügen Sie einfach eine weitere Eigenschaft in Ihrem CSS hinzu. er wollte, wahrscheinlich besser auf Ereignisse überprüfen „klicken“ und „MouseEnter-“ und machen es selbst, es ist ziemlich einfach

div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 

 

 
div:hover { 
 
    background-color: red; 
 
    color:white; 
 
}  
 
div:focus { 
 
    background-color: red; 
 
    color:white; 
 
}

<div tabindex="1">A</div> 
 
<div tabindex="2">B</div> 
 
<div tabindex="3">C</div>