jQuery的顯示/隱藏DIV

你好我有編碼的一些jQuery的用於代替另一本網頁上我的網站恰好更換一個DIV打擾 - http://www.heggie5.webspace.virginmedia.com/play.html jQuery的顯示/隱藏DIV

我已成功地與CSS成功地實現它懸停，但這不完全是我想要的 - 我已經在右上角div上使用CSS轉換來實現期望的點擊效果，但在離開div時沒有回到原始狀態，並且如果再次點擊則沒有平穩的過渡和它真正笨重。對不起，如果我的術語混淆btw！

我對懸停替換CSS是

.sportintro { 
    float: left; 
    display: block; 
    position: relative; 
    height: 600px; 
    width: 560px; 
    } 
.sporthide { 
    float: left; 
    position: relative; 
    font-family: anticregular, sans-serif; 
    height: 592px; 
    width: 552px; 
    background-image: url(images/1sport.jpg); 
    margin-top: 4px; 
    margin-left: 4px; 
    -webkit-border-radius: 20px 0px 0px 0px; 
    -moz-border-radius: 20px 0px 0px 0px; 
    border-radius: 20px 0px 0px 0px; 
    } 

.sportshow { 
    float: left; 
    position: relative; 
    display: none; 
    height: 592px; 
    width: 552px; 
    background-image: url(images/2sport.jpg); 
    margin-top: 4px; 
    margin-left: 4px; 
    -webkit-border-radius: 20px 0px 0px 0px; 
    -moz-border-radius: 20px 0px 0px 0px; 
    border-radius: 20px 0px 0px 0px; 
    } 
.sportintro:hover>.sporthide { 
    display: none; 
    } 
.sportintro:hover>.sportshow { 
    display: block; 
}

和轉變是

.runningintro { 
float: right; 
height: 200px; 
width: 310px; 
display: block; 
position: relative; 
} 

.runhide { 
float: left; 
position: absolute; 
font-family: anticregular, sans-serif; 
height: 196px; 
width: 306px; 
background-image: url(images/1jog.jpg); 
margin-top: 4px; 
-webkit-border-radius: 0px 20px 0px 0px; 
-moz-border-radius: 0px 20px 0px 0px; 
border-radius: 0px 20px 0px 0px; 
opacity: 1; 
z-index: 1; 
} 

.runshow { 
float: left; 
position: absolute; 
height: 196px; 
width: 306px; 
margin-top: 4px; 
-webkit-border-radius: 0px 20px 0px 0px; 
-moz-border-radius: 0px 20px 0px 0px; 
border-radius: 0px 20px 0px 0px; 
background-color: #00C; 
} 
input{display:none} 

input:checked + .runhide{ 
opacity: 0; 
cursor: pointer; 
-moz-transition: opacity 2s ease-in-out 1s; 
-webkit-transition: opacity 2s ease-in-out 1s; 
transition: opacity 2s ease-in-out 1s; 

} 
.runhide:target { 
opacity: 1; 
transition: opacity 2s ease-in-out 1s; 
}

我會很感激與問候任何幫助，使這個簡單的使用查詢 - 我仍然在舊的Jquery新鮮，並在這裏進入結！

來源

2013-11-26 Cameron Heggie

什麼是你的問題？ –

如何使用jquery點擊替換另一個div？然後在點擊時恢復到原始div？我在網上似乎可以找到的所有內容都是使用按鈕或其他＃來激活事件 - 我希望它在點擊位於實際div時發生。 –

我明白你的問題，如果你可以做一個小提琴，然後我可以測試這個 – DaniP

嗨，你可以用這樣的功能工作：

$(document).ready (function() { 
    $('#playwrapper > div').click (function() { 
     $('.playdescription').fadeOut(); 
     $(this).find('.playdescription').fadeIn(); 
    }) 
})

來源

2013-11-26 15:33:12 DaniP

感謝danko，使用你的建議我已經設法使它工作，並與多一點的研究合併不同點擊和懸停效果多個div。非常非常感謝 –

林」樂意幫助你...如果這個答案是有用的解決你的問題，不要忘記檢查這作爲答案 – DaniP

對不起我的朋友，是的，它是你的建議，幫我回答我的問題..直到現在沒有注意到這一點。非常感謝Danko –

jQuery的顯示/隱藏DIV

回答

相關問題