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

我有三个盒子：

div{
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
光标：指针；
}
选定部门，
div:悬停{
背景色：红色；
颜色：白色；
}

A
B
C

jQueryUI

$.selective（）

做得很好

$（函数（）{
$（“#可选”）.selective（）；
});
#反馈{
字号：1.4em；
}
#可选。用户界面选择{
背景#FECA40；
}
#可选择。用户界面已选择{
背景：#F39814；
颜色：白色；
}
#可选的{
列表样式类型：无；
保证金：0；
填充：0；
宽度：60%；
}
#可选锂{
保证金：3倍；
填充：0.4em；
字号：1.4em；
高度：18px；
}

第1项
第2项
第3项
第4项
第5项
第6项
第7项

$（'.choice'）。单击（函数（）{
$（this.addClass（'selected'）；
});
div{
显示：内联块；
宽度：50px；
高度：50px；
边框：1px实心#000；
}
div:悬停{
背景：红色；
}
.选定{
背景：红色；
边框：3倍纯绿；
颜色：#fff；
}

A.
B
C
您可以使用jQuery
toggleClass（）
方法在鼠标单击时添加和删除所选的类

如果您永久性地想将类
所选
添加到元素中，请改用
addClass（）
方法


$（函数（）{
$（“div”）。单击（函数（）{
$（此）.toggleClass（“选定”）；
});
});
div{
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
光标：指针；
}
选定部门，
div:悬停{
背景色：红色；
颜色：白色；
}

A.
B
C
工作小提琴：

如果我得到了你的问题，那么你想要下面这样的东西，这将是一种纯粹的CSS方式。只需在CSS中再添加一个属性


div{
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
光标：指针；
}
div:悬停{
背景色：红色；
颜色：白色；
}    
新闻组：焦点{
背景色：红色；
颜色：白色；
}
A
B
C
我不认为jquery ui Selective是他想要的确切功能，可能最好检查事件“单击”和“鼠标指针”，使其成为自己的，这很简单。@Michael Coker同样的事情可以在没有jquery和纯CSS的情况下完成，那为什么不呢？就是这样！多谢各位@MichaelCoker@AlesTrunda这正是OP想要的。@Chirag这不一样，你不能用CSS来实现这一点。
$(document).on('click','div',function(e){
     $(this).toggleClass('sel');
});