0
我有三個水平排列的div。每個都充當按鈕。當你點擊他們下面的另一個div時，會顯示不同的圖像。當您將鼠標懸停在該圖片上時，另一個div會滑動並鏈接到其他網站。出站鏈接不起作用
問題是，當我點擊第二個或第三個按鈕，然後點擊出站鏈接，在它們下面的div中滑動，該div的圖像返回到它的默認圖像，而不是帶我到網站鏈接鏈接到我。
我試着把這個放在一個JSFiddle中，但它只是不會顯示正確的演示。
這是網站：不再可用 - 點擊「工作」，你會看到3個div按鈕。
如何獲取鏈接以不返回默認圖片，而只是將我發送到鏈接到的網站？
下面是該網站的該部分代碼：
HTML
<section class="top" data-type="background" data-speed="10" class="pages">
<section id="w">
<div class="title">My Work</div>
<div id="workSamples">
<a id="button1" href="#w" tabindex="1"><div class="slideUp"><img src="_images/work/sample01.jpg"></div></a>
<a id="button2" href="#w" tabindex="2"><div class="slideUp"><img src="_images/work/sample02.jpg"></div></a>
<a id="button3" href="#w" tabindex="3"><div class="slideUp"><img src="_images/work/sample03.jpg"></div></a>
<div id="content">
<div id="default"><img src="_images/absolutebeauty.jpg"><a href="http://www.absolutebeauty.ie" target="_blank"><div class="caption">Absolute Beauty<br><u>Visit Site</u></div></a></div>
<div id="absol"><img src="_images/absolutebeauty.jpg"><a href="http://www.absolutebeauty.ie" target="_blank"><div class="caption">Absolute Beauty<br><u>Visit Site</u></div></a></div>
<div id="best"><img src="_images/bestacoustic.jpg"><a href="http://www.bestacousticguitarguide.com" target="_blank"><div class="caption">Best Acoustic Guitar Guide<br><u>Visit Site</u></div></a></div>
<div id="engage"><img src="_images/engagement.jpg"><a href="http://www.engagementringshq.com" target="_blank"><div class="caption">Engagement Rings HQ<br><u>Visit Site</u></div></a></div>
</div>
</div>
</section>
</section>
CSS
#workSamples {
width:960px;
margin:auto;
}
#button1 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#button2 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#button3 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.slideUp {
width:300px;
height:236px;
overflow:hidden;
}
.slideUp img {
height:auto;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.slideUp img:hover {
margin-top: -236px;
}
#button1:focus~#content #default,
#button2:focus~#content #default,
#button3:focus~#content #default,
#button4:focus~#content #default {display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}
#content {
width:940px;
height:307px;
color:black;
font-size:10px;
text-align:center;
margin:20px auto;
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
overflow:hidden;
background:red;
}
.caption {
width:920px;
margin:auto;
height:40px;
background:#694264;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
transition:all .3s ease-out;
left:0;
font-size:14px;
padding:10px;
font-family: 'Open Sans', sans-serif;
}
#content:hover .caption {
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
#absol,#best,#engage {display:none;}
#absol:hover{
background:red;
}
U在您的「」附近有未封閉的元素，HTML中有雙重類屬性。修復你的HTML，它會工作。請參閱：http://validator.w3.org/check?uri=http%3A%2F%2Fwww.liddily.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 – DarkBee