css - 带有背景图像的维恩图，添加链接？

Question

已创建此维恩图以用作一种导航区域。

http://i.stack.imgur.com/xlyCJ.png

当用户将鼠标悬停在每个圆圈上时，图像会发生变化（相同的图像，减去绿色叠加层和文本）。我想让每个圈子都可以点击，每个圈子都链接到网站中的相应页面。

无法弄清楚如何。

这是我用来创建它的 HTML 和 CSS。

HTML：

<div class="buttons">
<div><a class="buttons" href="fashion_design.html"></a></div>`
<div><a href="costume_design.html"> </a></div>
<div><a href="photography.html"></a></div>
<div><a href="artwork.html"></a></div>
</div><!--buttons-->

CSS: .buttons div { 宽度: 390px; 高度：390px；边框半径：200px；-moz-边界半径：200px；-webkit-border-radius:200px; -khtml-border-radius:200px; 向左飘浮; 不透明度：.9；显示：块；}

.buttons div:hover {
background-position:0px 400px;
z-index:5;
position:relative;

}

.buttons div:nth-child(1) {
background-image:url(images/fashion_hover.png);
color: #FFF;
margin-top:60px;
z-index:1;  

}

.buttons div:nth-child(2){
background-image:url(images/costume_double.png);
color: #FFF;
margin-left:-60px;
margin-top:60px;
z-index:2;  

}

.buttons div:nth-child(3){
background-image:url(images/photography_hover.png);
color: #FFF;
margin-top:-60px;
z-index:3;

}

.buttons div:nth-child(4){
background-image:url(images/artwork_hover.png);
color: #FFF;
margin-left: -60px;
margin-top:-60px;
z-index:4;

}

Answer 1

它不起作用，因为锚中没有文本，因此实际上没有显示锚。你可以使用jquery：

$(".buttons div").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

或者，只需在每个 div 上使用 javascript：

<div onClick="window.open('http://yahoo.com');">

Answer 2

更改您的 CSS，使其针对锚标记而不仅仅是 div

例如

.buttons div{} should be .buttons div a{} 

看小提琴