Question

我目前正在处理一个项目部分，共有3列，我已经设置了将鼠标悬停在其上时要更改的比例，但是我的客户要求在打开页面时需要对中间列进行缩放第一次，将鼠标悬停在左侧或右侧的第一个位置之后，中间的列将恢复为原始的比例，与另一个位置相同。

可能吗？

正确的方法应该是：

0 =原始比例

1 =规模更大

页面的第一视图-> [0 | 1 | 0]-悬停在另一列中-> [1 | 0 | 0]-不悬停在列中-> [0 | 0 | 0]

我不知道我是否足够清楚，对不起我的英语，但不是我的母语。

Answer 1

是的。

将一个类分配给中间框，首先将其放大，然后将鼠标悬停在另一个框上，然后立即删除该类。

编辑-根据@Kaiido的建议，将事件绑定从on更改为one。

$('body').one('mouseover', '.box', function (event) {
  $('.box').removeClass('focussed');
});

body {
  padding: 50px;
}

.box {
  background-color: #fff;
  border: 1px solid #ddd;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.box.focussed,
.box:hover {
  transform: scale(1.2)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>
<div class="box focussed"></div>
<div class="box"></div>

特殊的：悬停效果

1 个答案: