Question

我已经创建了这个六角形导航以适应网站。

http://www.flickr.com/photos/14577801@N00/11202239254/

我想知道在html和css中创建导航结构的最佳方法是什么。如果链接在白色六边形内，我希望将鼠标悬停在这些链接上以将白色背景更改为颜色。我尝试使用背景图像来做到这一点，但还没到那里。周围的彩色六边形我一直用作导航的整个背景图像。

我在网上发现了这个：http://jtauber.github.io/articles/css-hexagon.html，我认为这可能很棒，但我认为必须有办法使用背景图片。

谢谢，蒂姆。

Answer 1

可以在使用css悬停时更改元素的颜色（在这种情况下为六边形）。如果我们将它添加到css-hexagon教程中的样式属性中：

.hex:hover {
    background-color: blue;
}
.hex:hover:before {
    border-bottom: 30px solid blue;
}
.hex:hover:after {
    border-top: 30px solid blue;
}

当光标悬停在六边形上时，六边形会改变颜色，您可以在jsfiddle中看到。

你可以在这里找到CSS的好文档：hover伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

如何使用六边形形状创建导航

1 个答案: