特殊的 :hover 效果

Question

我目前正在处理一个项目部分，该部分有 3 列，我已经将鼠标悬停在其中一列上时更改比例，但我的客户要求在页面打开时中间列需要已经缩放第一次打开，鼠标悬停在左边或右边那一个后，中间那一列恢复原来的比例，和另一列一样。

可能吗？

正确的方法应该是：

0=原始比例

1= 规模更大

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

不知道我说的够不够清楚，抱歉我的英语不是我的母语。

Answer 1

是的，这是可能的。

将 class 分配给中间的框，最初将其放大，然后在将鼠标悬停在另一个框上时立即删除 class。

编辑 - 根据@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>

特殊的 :hover 效果

A particular :hover effect

javascript

css

scale