2

看看这个 jsFiddle！我正在使用 box-shadow 来获得 groovy 3D 外观（别担心，我在真实版本中使用了不同的颜色），但是当您将鼠标悬停在 box-shadow 线上时，悬停状态会不断切换，即超级烦人。你必须对你的鼠标有点特殊才能做到这一点，但尽管如此，我不喜欢它。我曾尝试使用 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;
}
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;
}

这样，悬停将应用于悬停时的整个项目，而不仅仅是 a 标签。我更新了你的 jsFiddle，以确保它适用于你正在寻找的东西。

于 2013-02-12T16:52:24.513 回答
0

I'd recommend using jQuery .hover() and assigning/removing a class on the parent --

I know you said you tried jQuery already, but you probably used it on the a -- the problem is that your a element moves, but the parent will not move, so use the parent's static position to fix your issue.

Your css would then be kind of like this:

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

And your jQuery would look like this:

$(".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 回答