Диаграмма Венна с фоновыми изображениями, ссылки?

Question

Создали эту диаграмму venn для использования в качестве своего рода навигационной области.

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 ДИВ { ширина: 390px; высота: 390px; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; -khtml-border-radius: 200px; float: слева; непрозрачность: .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; 
}); 

В качестве альтернативы просто использовать JavaScript на каждом DIV:

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

Answer 2

Измените ваш CSS таким образом, что он нацелен на якорь тег, чем просто DIV

для например

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

fiddle