我正在制作我的投资组合网站,它应该是一个以图片作为标签的大型 Accordion 。由于它是一个长页面,因此选项卡将不是链接。我真的是 jquery 的新手,所以我不确定如何让它与我的 css 一起工作。基本上,应该发生的是,当您单击选项卡时,选项卡图像会随着 Accordion 下拉描述而转换为标题。我只希望在单击时发生转换。
过渡可见here
它显示了过渡应该如何工作,但目前它只能由悬停状态触发。谢谢!
html:
<div class="img-container">
<img src="images/fashion_spread.jpg">
<div class="img-hidden">
<img src="images/fashion_spread_bw.jpg">
</div>
</div>
CSS:
.img-container {
width: 100%;
height: auto;
margin-right: auto;
margin-left:auto;
float: left;
display:list-item;
position: relative;
}
.img-container img {
width: 100%;
height: auto;
}
.img-hidden {
bottom:0;
position: absolute;
opacity:0;
filter: alpha(opacity = 0);
width: 100%;
height: 100%;
z-index:1000;
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
}
.img-container:hover .img-hidden{
opacity:1;
filter: alpha(opacity = 100);
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
}
最佳答案
您可以将 :hover
更改为 :active
但这只会在按住鼠标时应用您的效果。我不认为你可以单独使用 CSS 做你想做的事。
由于您在此处标记了 jquery,因此这是一个 jquery 解决方案:
改变这个:
.img-container:hover .img-hidden{
为此:
.img-container.active .img-hidden{
JQuery:
$(document).ready(function() {
$('.img-container').on('click',function() {
$(this).toggleClass('active');
});
});
DEMO
编辑
根据下面的评论,这是一个完整的、有效的 html 页面:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.img-container {
width: 100%;
height: auto;
margin-right: auto;
margin-left:auto;
float: left;
display:list-item;
position: relative;
}
.img-container img {
width: 100%;
height: auto;
}
.img-hidden {
bottom:0;
position: absolute;
opacity:0;
filter: alpha(opacity = 0);
width: 100%;
height: 100%;
z-index:1000;
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
}
.img-container.active .img-hidden{
opacity:1;
filter: alpha(opacity = 100);
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.img-container').on('click',function() {
$(this).toggleClass('active');
});
});
</script>
</head>
<body>
<div class="img-container">
<img src="images/fashion_spread.jpg">
<div class="img-hidden">
<img src="images/fashion_spread_bw.jpg">
</div>
</div>
</body>
</html>
关于jquery - 如何通过单击而不是悬停来激活交叉淡入淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22334910/