Question

您好我正忙着编写一些jquery来替换我的网站上这个页面上的一个div代替另一个div - http://www.heggie5.webspace.virginmedia.com/play.html

我已经设法用悬停的CSS成功实现了它，但这并不是我想要的 - 我在右上方的div上使用了CSS过渡来实现所需的点击效果但是没有对原始状态的回调在离开div时如果再次点击则没有平滑过渡，它真的很笨重。我很抱歉，如果我的术语令人困惑，那就完蛋了！

我在悬停时替换的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();
   })
})

Jquery在点击时显示/隐藏div

1 个答案: