Question

我有三个盒子：

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>

我想点击其中一个框，当我点击鼠标并移动到其他框时，div将添加“选定”类。这可能吗？

感谢。

Answer 1

jQueryUI edit-tree做得很好https://jqueryui.com/selectable/

＆＃13;

select    id, count(*) num_records
from      your_table
where     visit_date = appointment_date
group  by id

＆＃13;

$.selectable()

＆＃13;

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

＆＃13;

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

您可以使用jQuery selected方法在鼠标单击时添加和删除类toggleClass()。

如果您一直希望将类selected添加到元素，请改用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');
});

工作小提琴：

https://jsfiddle.net/hrvn8y1d/

Answer 5

如果我收到您的问题，那么您需要类似下面的内容，这将是纯粹的CSS方式。只需在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>

将类添加到鼠标单击时鼠标悬停的所有元素

5 个答案: