jQuery的显示/隐藏DIV

Question

你好我有编码的一些jQuery的用于代替另一本网页上我的网站恰好更换一个DIV打扰 - http://www.heggie5.webspace.virginmedia.com/play.html

我已成功地与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新鲜，并在这里进入结！

Answer 1

嗨，你可以用这样的功能工作：

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