2014-01-17 43 views
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; 
} 
+0

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

回答

0

一旦你點擊縮略圖上,預覽圖像並且每次您從縮略圖上單擊時,標題都會恢復爲默認值。這是因爲您使用: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;} 
0

嘗試display: block;a

a { 
display: block; 
} 

原因:要插入Div的內部a標籤,通過deafault a標籤是內聯。因此,您應更改爲block