如何创建六边形的导航

Question

我创建了这个六边形导航来适应网站。

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

我想知道在html和css中创建导航结构的最佳方法是什么。如果链接在白色六边形内，我想悬停在这些链接上，将白色背景更改为颜色。我试过使用背景图像来实现这一点，但还没有完全实现。周围的彩色六边形我一直在使用作为导航的整体背景图像。

我在网上找到了这个：http://jtauber.github.io/articles/css-hexagon.html，我认为使用它可能很棒，但我认为必须有一种方法来使用背景图像。

谢谢，蒂姆。

Answer 1

元素的颜色（在本例中为六边形）可以在悬停时使用css进行更改。如果我们将其添加到css六边形教程中的样式属性中：

.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