如何防止盒子陰影導致懸停狀態不斷切換？

Check out this jsFiddle!我正在使用盒子陰影來獲得Groovy 3D外觀（不要擔心，我在真實版本上使用了不同的顏色），但是當您將鼠標懸停在方塊陰影線上時，懸停狀態會一直處於打開和關閉狀態，這是超級煩人。你必須特別用鼠標來實現這一點，但是，我不喜歡它。我嘗試過使用jQuery hover（）和hoverIntent（），這會減慢切換速度，但不能解決問題。一個潛在的原因是懸停上的負邊緣，但我不想擺脫這一點。任何想法非常感謝，謝謝。如何防止盒子陰影導致懸停狀態不斷切換？

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; 
}

來源

2013-02-12 dezman

在我的瀏覽器中沒有發生這種情況。 – 2013-02-12 16:50:55

我確定它是由負邊緣造成的，因爲您告訴元素在鼠標懸停時「移動」。我正在使用最新版本的FF，並且不會發生閃爍。擺脫負餘量。或者，您可以添加一個邊距，以便在未將標籤懸停時進行定位。 – Pankucins 2013-02-12 16:51:48

你使用什麼瀏覽器？我使用Chrome，但它很難讓它發生...... – dezman 2013-02-12 16:52:00

編輯：固定高度也是必要的，因爲在評論（感謝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-12 16:52:24 PlantTheIdea

您還需要爲'.navLink'元素添加固定高度，以便在懸停時不調整大小。 http://jsfiddle.net/mblase75/dnGQE/2/ – Blazemonger 2013-02-12 16:53:29

生病了，謝謝!!! – dezman 2013-02-12 16:57:51

夥計們很好！我在發佈後添加了解釋，以提供更多上下文。 – PlantTheIdea 2013-02-12 16:58:42

我建議使用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-12 16:58:40 tmsimont

jQuery是一切的答案，它似乎... – PlantTheIdea 2013-02-12 16:59:27

大聲笑 - 當然是簡單的答案 - 你也可以在父母上使用psuedoclass ... – tmsimont 2013-02-12 17:00:00

也 - jquery往往是你最常見的答案，當你標記你的問題與「jquery」:) – tmsimont 2013-02-12 17:00:34

如果你改變了懸停狀態父：

.navLink:hover a {

並更改邊距，但只有底部：

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

它工作正常。

如果更改底部邊距不正確，則可以製作不同的佈局。唯一的關鍵點是使div的大小不變

來源

2013-02-12 17:00:36 vals

如何防止盒子陰影導致懸停狀態不斷切換？

回答

相關問題