显示处于"hover"状态的元素"on"当其他元素未悬停时

Question

我有几个divs应该放大，并且正在使用此代码来实现这一目标：

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

我希望其中一个divs显示放大的当其他任何一个divs徘徊时。

我该如何实现？

谢谢！

Answer 1

这可以使用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 2

.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 3

我想您可以使用一些jQuery。

您是否尝试过使用if函数和.css（"变换"，" scaley（1.0）"的某些东西；默认情况下放大了，然后当鼠标悬停在另一个classe中时，它将减少。

那是您要寻找的吗？