Question

我有几个div应该在悬停时放大，并使用此代码来实现：

.classname:hover {
  transform:scaleY(1.1);
  transform-origin: bottom; }

我希望其中一个div显示放大的，除了，当任何其他div被悬停时。

我怎样才能做到这一点？

谢谢！

Answer 1

.classname{
width:100px;
height:100px;
background:#454545;
margin:20px;

}
.classname:hover {
  transform:scaleY(1.1);
  transform-origin: bottom; 
  }

<div class="classname"></div>
<div class="classname"></div>
<div class="classname"></div>
<div class="classname"></div>

Answer 2

这可能是使用jQuery实现的：

创建.hover类并将其添加到第一个div后，您可以使用此jQuery函数：

$('.classname').hover(
       function(){ $('.hover').removeClass('hover'); $(this).addClass('hover') },
       function(){ $('.classname:first-child').addClass('hover'); $(this).removeClass('hover') }
)

Codepen：http://codepen.io/dragosmicu/pen/vxeNze

Answer 3

我猜你可以使用一些Jquery。

您是否尝试过使用if函数和.css（“transform”，“scaleY（1.0）”;当其他人处于悬停状态时应用于您的div？您需要在第一个div中添加另一个类并使其成为默认情况下放大然后当鼠标悬停其他一个classe时它会减少。

这就是你要找的东西吗？

在＆＃34; hover＆＃34;中显示元素国家＆＃34; on＆＃34;当其他元素没有徘徊时

3 个答案: