维恩图与背景图片，添加链接？

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; height：390px; border-radius：200px; -moz-border-radius：200px; -webkit-border-radius：200px; -khtml-border-radius：200px; float：left; 不透明度：0.9; display：block; }

.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;

}

来源

2013-04-01 user2233093

它不工作，因为是如此有效地不显示锚锚没有文字。你可以使用jQuery：

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

或者只是使用JavaScript上的每个格：

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

来源

2013-04-01 19:10:01

尝试了每个JavaScript，完美的作品。非常感谢！ – user2233093

是否可以直接导航到页面而不是打开新窗口？ – user2233093

'window.open（“http://www.yahoo.com”，“_self”）' –

改变你的CSS，使得它的目标定位标记不仅仅是DIV

为如

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

查看fiddle

来源

2013-04-01 19:15:42 anpsmn

维恩图与背景图片，添加链接？

回答

相关问题