带有背景图像的维恩图，添加链接？答案

【问题标题】：Venn diagram with background images, add links?带有背景图像的维恩图，添加链接？
【发布时间】：2013-03-22 21:30:57
【问题描述】：

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

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 { 宽度：390 像素；高度：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;

}

【问题讨论】：

标签： css hyperlink hover background-image css-selectors

【解决方案1】：

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

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

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

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

【讨论】：

在每个上都试用了 javascript，效果很好。非常感谢！
是否可以直接获取链接导航到页面而不是打开新窗口？

【解决方案2】：

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

例如

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

见fiddle

【讨论】：