单击鼠标悬停以应用样式
Clicked mouseover to apply style
我有 9 个组件 (divs) 在一个更大的组件中。如果我点击它们中的任何一个,它将切换 class,将点击的 div 的颜色更改为红色。我想在一个 div 上单击并按住鼠标按钮,然后在其他 div 上滑动鼠标以将它们的颜色更改为红色,而无需每次都单击。实现该结果的最佳方法是什么?
感谢所有提示和帮助!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<style>
#mainDiv .CH {
height:200px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
border:1px solid #fff;
}
#mainDiv .CH.highlighted {
background-color:green;
}
.CH{
height:100px;
}
</style>
<script>
$(function() {
var isMouseDown = false;
$("#mainDiv .CH")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
});
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
</script>
<div id="mainDiv" class="container">
<div class="row">
<div class="col-lg-4 CH">1</div>
<div class="col-lg-4 CH">2</div>
<div class="col-lg-4 CH">3</div>
</div>
<div class="row">
<div class="col-lg-4 CH">4</div>
<div class="col-lg-4 CH">5</div>
<div class="col-lg-4 CH">6</div>
</div>
<div class="row">
<div class="col-lg-4 CH">7</div>
<div class="col-lg-4 CH">8</div>
<div class="col-lg-4 CH">9</div>
</div>
</div>
</body>
我有 9 个组件 (divs) 在一个更大的组件中。如果我点击它们中的任何一个,它将切换 class,将点击的 div 的颜色更改为红色。我想在一个 div 上单击并按住鼠标按钮,然后在其他 div 上滑动鼠标以将它们的颜色更改为红色,而无需每次都单击。实现该结果的最佳方法是什么? 感谢所有提示和帮助!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<style>
#mainDiv .CH {
height:200px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
border:1px solid #fff;
}
#mainDiv .CH.highlighted {
background-color:green;
}
.CH{
height:100px;
}
</style>
<script>
$(function() {
var isMouseDown = false;
$("#mainDiv .CH")
.mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
});
$(document)
.mouseup(function() {
isMouseDown = false;
});
});
</script>
<div id="mainDiv" class="container">
<div class="row">
<div class="col-lg-4 CH">1</div>
<div class="col-lg-4 CH">2</div>
<div class="col-lg-4 CH">3</div>
</div>
<div class="row">
<div class="col-lg-4 CH">4</div>
<div class="col-lg-4 CH">5</div>
<div class="col-lg-4 CH">6</div>
</div>
<div class="row">
<div class="col-lg-4 CH">7</div>
<div class="col-lg-4 CH">8</div>
<div class="col-lg-4 CH">9</div>
</div>
</div>
</body>