style如何设置hover点击盒子1改变颜色后,再点击盒子2改变颜色,同时盒子变回原来的颜色
时间: 2024-09-28 12:05:44 浏览: 24
要实现这样的效果,你需要组合CSS和JavaScript/jQuery。首先,在HTML中为每个盒子添加一个唯一的ID:
```html
<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
```
接着,在CSS中定义基本样式和 hover 状态的颜色,以及一个变量来保存当前激活的盒子颜色:
```css
.box {
width: 100px;
height: 100px;
background-color: #gray; /* 默认颜色 */
color: white;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.current-active {
background-color: #another-color; /* 需要切换的颜色 */
}
/* 变成原来颜色的class */
.default-color {
background-color: #gray; /* 初始颜色 */
}
```
然后用JavaScript来控制颜色的变化:
```javascript
$(document).ready(function() {
var currentBox = null;
// 当鼠标移到某个盒子上时
$('.box').on('mouseover', function() {
if (currentBox !== null) {
$(currentBox).removeClass('current-active default-color'); // 回滚其他已激活盒子的颜色
}
$(this).addClass('current-active');
currentBox = this.id;
});
// 当鼠标离开当前激活的盒子时
$('.box').on('mouseout', function() {
if ($(this).hasClass('current-active')) {
$(this).removeClass('current-active'); // 回滚当前激活的盒子
currentBox = null;
}
});
// 当点击盒子时
$('.box').click(function() {
var oldActiveBox = $('#'+currentBox);
if (oldActiveBox.length > 0) {
oldActiveBox.removeClass('current-active');
}
$(this).toggleClass('current-active').toggleClass('default-color'); // 交换两个盒子的颜色
currentBox = this.id;
});
});
```
这样,当鼠标悬停或点击盒子时,它们之间会交替变换颜色,而鼠标移开时则会恢复到初始颜色。
阅读全文