Question

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

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

目前为looks like this。

这是我的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>

Answer 1

您只需将以下内容添加到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 Fiddle demo

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

编辑以回应OP的评论，在下面的评论中：

不确定你是如何从中得到一个形状的，需要解释一下吗？有用。有没有办法让箭头变小，是否可以采用盒子阴影效果？

它起作用是因为元素的边界以45°相交，并且因为元素没有height / width，因此产生了一个“指向”元素中心的三角形形状（或在这种情况下，伪元素）。如果所有四个边界都可见，那么你就有一个正方形;如果顶部和底部是可见的，你会有一个三角形的“沙漏”，依此类推。

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

负余量 - 左（-1em声明中的margin）必须等于border-width才能将伪元素沿水平轴居中放置，但是它可以调整到味道。

要添加box-shadow很困难，因为必须指定所有四个边框来创建三角形，box-shadow将是整个元素的矩形，而不仅仅是“可见”部分它的。它可以被模拟，如果你可以使用另一个伪元素，在这种情况下是::before，但它不会有真正的box-shadow的常见“模糊”，但是，一个演示，只需复制上面的CSS，修改::after到::before（并确保::before元素出现之前 ::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 Fiddle demo

实现此导航效果的最有效方法是什么？

1 个答案: