3

カーソルを合わせると浮き上がるようなボタンを作りたいです。私は現在、ボックスシャドウを使用して、上げられたボタンの視覚的な外観を作成しています。残念ながら、おそらく予想されるように、シャドウはホバーイベントをキャプチャしないため、ボタンを下から近づけるとボタンが乱暴に動作します。

これが私の少ないコードです：

.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

私の質問に対する正確な答えは、「それは不可能です」です。（ギャビーの優れた答えを参照してください。）

ラッパー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 に答える