Question

我有三个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;
}

Answer 1

单击缩略图图像后，每次单击缩略图时，预览图像和标题将恢复为默认值。这是因为您使用:focus来更改CSS属性。一旦缩略图的焦点丢失，一切都会恢复正常。

我没有对此进行过测试，但我认为它应该可行。它使用了一些JavaScript。

编辑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="absolButton" href="#w" tabindex="1" onclick="switchTab(this.id);"><div class="slideUp"><img src="_images/work/sample01.jpg"></div></a>
                    <a id="bestButton" href="#w" tabindex="2" onclick="switchTab(this.id);"><div class="slideUp"><img src="_images/work/sample02.jpg"></div></a>
                    <a id="engageButton" href="#w" tabindex="3" onclick="switchTab(this.id);"><div class="slideUp"><img src="_images/work/sample03.jpg"></div></a>
                    <div id="content">
                        <div id="defaultContent"><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="absolContent"><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="bestContent"><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="engageContent"><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>

添加此JavaScript：

var lastClicked;

function switchTab(id) {
    document.getElementById("defaultContent").style.display = "none";
    if (lastClicked != null) {
        document.getElementById(lastClicked + "Content").style.display = "none";
    }
    lastClicked = id;
    document.getElementById(id + "Content").style.display = "block";
}

删除此CSS：

#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;}

Answer 2

对display: block;

尝试a

像

a {
display: block;
}

原因：您在a标记内插入Div，而deafault a标记是内嵌的。所以你应该改为block

出站链接不起作用

2 个答案: