3

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

4

2 回答 2

2

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

于 2012-11-15T17:55:15.913 回答
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;
    }
  }
}
于 2012-11-15T18:16:04.943 回答