【发布时间】：2014-01-17 12:25:53
【问题描述】：
我有三个水平排列的 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 在您的
</section>附近有未封闭的元素，并且在您的 HTML 中有双重类属性。修复您的 HTML，它将起作用。请参阅：validator.w3.org/…