1

我正在尝试以尽可能小的占用空间来实现这种鼠标悬停效果。我无法显示箭头（.png），它被高度切断，我不确定如何显示高度。到目前为止，我已经尝试了几种失败的方法，希望有人可以帮助我。

我所做的是设置框的锚点样式并尝试将小箭头定位在框下方。箭头没有显示在锚框的外部，它被切断了。我尝试将箭头作为 LI 的一部分，它起作用了，但是因为锚点需要为 30px（蓝色框的高度）并且 LI 需要为 40px（框 + 箭头的高度 10px）它会显示箭头如果您将鼠标悬停在该 10px 区域而不是框上。

目前它看起来像这样。

这是我的CSS：

#navlist {
float:right;
}
#navlist li {
line-height:40px;
display:inline;
list-style-type: none;
margin-right: 20px;
}
#navlist li:hover {
background:url(../img/navArrow.png) no-repeat center;
background-position:50% 30px;
}
#navlist li a {
height:30px;
padding:3px 5px 3px 5px;
color:#26627f;

}
#navlist li a:hover {
background:#035173;
border-radius:3px;
color:#fff;
}

这是html：

<ul id="navlist">
    <li><a href="#">Get a Quote</a></li>
    <li><a href="#">Learn about Life Insurance</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Get Help</a></li>
</ul>
4

1 回答 1

5

您可以简单地将以下内容添加到您的 CSS 中：

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS 小提琴演示。

当然，这确实需要用户拥有一个实现 CSS 生成的内容和伪元素的浏览器。

针对 OP 的评论进行了编辑，在下面的评论中：

不太清楚你是如何从中得到一个形状的，愿意解释一下吗？有用。有什么办法可以让箭头变小并且可以产生箱形阴影效果吗？

它之所以起作用，是因为元素的边界在 45° 处相遇，并且因为没有height/width用于产生三角形“指向”元素中心（或者，在本例中为伪元素）的元素。如果所有四个边框都可见，那么您将有一个正方形；如果顶部和底部可见，您将有一个三角形的“沙漏”，等等。

要使三角形更小，只需为边框宽度分配一个更小的单位（在上面的示例中，边框设置为1em，只需将其更改5px为浏览器可以实现的任何其他尺寸和测量单位。

负边距左（声明-1em中的 the margin）必须等于 ，border-width以便将伪元素沿水平轴居中放置，但可以根据需要调整它。

添加 abox-shadow是很困难的，因为必须分配所有四个边框来创建三角形，这box-shadow将是整个元素的矩形，而不仅仅是它的“可见”部分。可以模拟它，如果您可以使用另一个伪元素，在这种情况下是::before，但它不会具有真正的通常的“模糊性” box-shadow，但是，作为演示，只需复制上面的 CSS，修改::afterto ::before（并确保该元素::before出现在for 的声明之前::after，因为稍后声明的元素将在先前声明的元素之上）。调整边距和border-top-color属性，它应该看起来不错：

#navlist li:hover a::before,
#navlist li a:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -0.7em;
    border: 1em solid transparent;
    border-top-color: #ccc;
}

#navlist li:hover a::after,
#navlist li a:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -1em;
    border: 1em solid transparent;
    border-top-color: #035173;
}​

JS 小提琴演示。

于 2012-05-21T16:50:35.630 回答