0

一種のナビゲーション エリアとして使用するために、このベン図を作成しました。

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

ユーザーが各円にカーソルを合わせると、画像が変化します (同じ画像から緑色のオーバーレイとテキストを除いたもの)。各サークルをクリックして、各サークルが Web サイトの適切なページにリンクされるようにしたいと考えています。

しかし、方法がわかりません。

作成に使用した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; 高さ: 390px; ボーダー半径:200px; -moz-border-radius: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;

}

4

2 に答える 2

0

アンカーにテキストがないため機能していないため、アンカーは事実上表示されません。jqueryを使用できます：

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

または、各 div で JavaScript を使用するだけです。

<div onClick="window.open('http://yahoo.com');">
于 2013-04-01T19:10:01.730 に答える