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

Question

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

这是我的 less 代码:

.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 框阴影上捕获悬停事件？或者是否有更好的方法来编写我想要的按钮类？

Answer 1

唯一的解决方法是围绕它包裹一个元素并使用它来获取悬停事件并定位 .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 属性，请根据您的设计进行调整..)