維恩圖與背景圖片，添加鏈接？

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

維恩圖與背景圖片，添加鏈接？

回答

相關問題