CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7479925
user7479925

Reputation:

Add class to all elements that mouse hovered while mouse clicked

I have three boxes:

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>

And i would like to click in one of the boxes, and while i'm with the mouse clicked and move to other boxes the div will have the "selected" classes add to it. Is this possible?

Thanks.

Upvotes: 0

Views: 75

Answers (5)

vatz88
vatz88

Reputation: 2452

You can add and remove the class selected upon mouse click using jQuery toggleClass() method.

If you permanently want to add class selected to the element then use addClass() method instead.

$(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>

Upvotes: 0

Chirag
Chirag

Reputation: 1022

If I get your question then you want something like below which will be a pure CSS way. Just add one more property in your CSS. 

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>

Upvotes: 0

ProgrammerV5
ProgrammerV5

Reputation: 1962

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

Working fiddle:

https://jsfiddle.net/hrvn8y1d/

Upvotes: 0

IGNITER
IGNITER

Reputation: 39

$('.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>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

jQueryUI $.selectable() does this well 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>

Upvotes: 1

Related Questions