hover - 如何在 css (less) box-shadow 上捕获悬停事件

我想创建一个按钮，当您将鼠标悬停在它上面时，它看起来好像会升起。我目前正在使用 boxshadow 来创建凸起按钮的视觉外观。不幸的是，正如预期的那样，阴影不会捕获悬停事件，这会导致按钮在您从底部接近时表现异常。

这是我的较少代码:

.button-new {
  background-color: lighten(@gray, 10%);
  padding: 10px 20px;
  .border-radius(8px);
  color: white !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  @shadow: 0 4px 0 rgb(183,183,183);
  .box-shadow(@shadow);
  position: relative;
  &:hover {
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
  }
  &:active {
    top: 0;
    @shadow: 0 4px 0 rgb(183,183,183);
    .box-shadow(@shadow);
  }
}

有没有办法在 css 框阴影上捕获悬停事件？或者有没有更好的方法来编码我想要的按钮类？

最佳答案

唯一的解决方法是在它周围包裹一个元素并使用它来抓取悬停事件并定位 .button-new ..

像这样的东西

.button-wrap:hover .button-new{
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
}

http://jsfiddle.net/gaby/jSJTS/2/ 上的演示
(更多 css 属性已更改，请根据您的设计进行调整..)

关于hover - 如何在 css (less) box-shadow 上捕获悬停事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13403258/