2

このjsFiddleをチェックしてください！私はボックスシャドウを使用してグルーヴィーな3Dの外観を取得しています（心配しないでください。実際のバージョンでは異なる色を使用しました）が、ボックスシャドウの線にカーソルを合わせると、ホバー状態がオンとオフを切り替え続けます。超迷惑。これを実現するには、マウスを具体的に指定する必要がありますが、それでも、私はそれが好きではありません。jQuery hover（）とhoverIntent（）を使用してみましたが、切り替えは遅くなりますが、問題は解決しません。考えられる原因の1つは、ホバーのマージントップがマイナスであるということですが、これを取り除きたくありません。どんなアイデアでも大歓迎です、ありがとう。

HTML：

<div class="navLink">
    <a>Samples</a>
</div>
<div class="navLink">
    <a>HTML</a>
</div>

CSS：

.navLink {
    height: 100%;
    float: left;
}
.navLink a {
    display: block;
    padding: 14px 10px 16px 10px;
    color: gray;
    font-size: 17px;
    background: aqua;
}
.navLink a:hover {
    box-shadow: inset 0px 0px 8px -1px blue, 0px 1px 0px 0px green, -1px 1px 0px 0px blue, -1px 2px 0px 0px green, -2px 2px 0px 0px blue, -2px 3px 0px 0px green, -3px 3px 0px 0px blue;
    cursor: pointer;
    margin: -3px -3px 0px 3px;
    background: blue;
}
4

3 に答える 3

2

編集：コメントに記載されているように、高さを固定することも必要です（Blazemongerに感謝します）：

これを切り替えます：

.navLink {
    height: 100%;
    float: left;
}
.navLink a:hover {
    box-shadow: inset 0px 0px 8px -1px blue, 0px 1px 0px 0px green, -1px 1px 0px 0px blue, -1px 2px 0px 0px green, -2px 2px 0px 0px blue, -2px 3px 0px 0px green, -3px 3px 0px 0px blue;
    cursor: pointer;
    margin: -3px -3px 0px 3px;
    background: aqua;
}

これに：

.navLink {
    height: 100px;
    float: left;
}
.navLink:hover a {
    box-shadow: inset 0px 0px 8px -1px blue, 0px 1px 0px 0px green, -1px 1px 0px 0px blue, -1px 2px 0px 0px green, -2px 2px 0px 0px blue, -2px 3px 0px 0px green, -3px 3px 0px 0px blue;
    cursor: pointer;
    margin: -3px -3px 0px 3px;
    background: aqua;
}

このようにして、ホバーは、タグだけでなく、ホバー時にアイテム全体に適用されます。jsFiddle を更新して、探しているもので機能することを確認しました。

于 2013-02-12T16:52:24.513 に答える
0

jQuery を使用し、親.hover()のクラスを割り当て/削除することをお勧めします-

すでに jQuery を試したとおっしゃっていましたが、おそらくそれを使用したとa思います。問題は、a要素は移動しますが、親は移動しないため、親の静的位置を使用して問題を修正します。

あなたのcssは次のようになります：

.navLink a {
    display: block;
    padding: 14px 10px 16px 10px;
    color: gray;
    font-size: 17px;
    background: aqua;
}
.navLink-hover a, .navLink a:hover {
    box-shadow: inset 0px 0px 8px -1px blue, 0px 1px 0px 0px green, -1px 1px 0px 0px blue, -1px 2px 0px 0px green, -2px 2px 0px 0px blue, -2px 3px 0px 0px green, -3px 3px 0px 0px blue;
    cursor: pointer;
    margin: -3px -3px 0px 3px;
    background: blue;
}

jQuery は次のようになります。

$(".navLink-hover").hover( function() {
  $(this).addClass(".navLink-hover");
}, function() {
  $(this).removeClass(".navLink-hover");
});
于 2013-02-12T16:58:40.840 に答える
0

ホバー状態を親に変更した場合:

.navLink:hover a {

マージンを変更しますが、下のみ:

margin: -3px -3px 3px 3px;

それは正常に動作します。

下マージンの変更がうまくいかない場合は、さまざまなレイアウトを作成できます。唯一の重要なポイントは、div のサイズを一定にすることです

于 2013-02-12T17:00:36.730 に答える