Question

创建了这个维恩图作为一种导航区域。

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

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

无法弄清楚如何。

这是HTML＆amp;我用来创建它的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; 边界半径：200像素; -moz-边界半径：200像素; -webkit-边界半径：200像素; -khtml边界半径：200像素; 向左飘浮; 不透明度：0.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{}

请参阅fiddle

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

2 个答案: