Question

我想创建一个按钮，当它悬停在它上面时，它看起来好像会上升。我目前正在使用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框阴影上捕获悬停事件？或者有更好的方法来编写我想要的按钮类吗？

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属性已更改，根据您的设计进行调整.. ）

Answer 2

我的问题的确切答案是：“这是不可能的。” （见Gaby的优秀答案。）

我确实设法在不使用包装div的情况下以不同的方式使用它;而不是使用框阴影我使用了css伪类before：

.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);
  border-bottom: 4px solid rgb(183,183,183);
  position: relative;
  &:hover {
    top: -8px;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 8px;
      left: 0;
      width: 100%;
      height: 100%;
      .border-radius(8px);
      background: green;
      border-bottom: green 4px solid;
    }
  }
  &:active {
    top: 0;
    &:before {
      top: 0;
    }
  }
}

如何在css（less）box-shadow上捕获悬停事件

2 个答案: