Jquery 如何通过单击而不是悬停来激活crossfade？_Jquery_Css_Click_Css Transitions_Cross Fade

Jquery 如何通过单击而不是悬停来激活crossfade？

jquery css

Jquery 如何通过单击而不是悬停来激活crossfade？,jquery,css,click,css-transitions,cross-fade,Jquery,Css,Click,Css Transitions,Cross Fade,我正在制作我的公文包网站，它应该是一个以图片为标签的大型手风琴。因为它是一个长页面，所以标签页不会是链接。我对jquery真的很陌生，所以我不知道如何让它与我的css一起工作。基本上，当你点击标签时，当手风琴拉下描述时，标签图像转换为标题。我只希望在单击时发生转换可以看到这种转变它显示了转换应该如何工作，但目前它只能由悬停状态触发。谢谢 html: 您可以将：hover更改为：active，但这只会在按住鼠标时应用您的效果。我不认为你可以做你想与CSS单独因为您标记了jquery，所以这里

我正在制作我的公文包网站，它应该是一个以图片为标签的大型手风琴。因为它是一个长页面，所以标签页不会是链接。我对jquery真的很陌生，所以我不知道如何让它与我的css一起工作。基本上，当你点击标签时，当手风琴拉下描述时，标签图像转换为标题。我只希望在单击时发生转换

可以看到这种转变

它显示了转换应该如何工作，但目前它只能由悬停状态触发。谢谢

html:

您可以将

：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'); 
    });

});

编辑

根据下面的评论，这里是一个完整的工作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>


.img集装箱{
宽度：100%；
高度：自动；
右边距：自动；
左边距：自动；
浮动：左；
显示：列表项；
位置：相对位置；
}
.img容器img{
宽度：100%；
高度：自动；
}
.img隐藏{
底部：0；
位置：绝对位置；
不透明度：0；
过滤器：alpha（不透明度=0）；
宽度：100%；
身高：100%；
z指数：1000；
过渡：不透明度0.5s；
-moz转换：不透明度0.5s；
-webkit转换：不透明度0.5s；
}
.img-container.active.img hidden{
不透明度：1；
过滤器：α（不透明度=100）；
过渡：不透明度0.5s；
-moz转换：不透明度0.5s；
-webkit转换：不透明度0.5s；
}
$（文档）.ready（函数（）{
$（'.img container'）。在（'click'，function（）上{
$（this.toggleClass（'active'）；
});
});

仅使用css的解决方案：目标选择器

<div class="img-container">
  <a href="#target-hidden">
   <img src="http://i.imgur.com/wEYmgYC.jpg">
   <span id="target-hidden" class="img-hidden">
     <img src="http://i.imgur.com/XRUqimG.jpg">
   </span>
  </a>
</div>

#target-hidden:target {
  opacity:1;
  filter: alpha(opacity = 100);
  transition:opacity 0.5s;
  -moz-transition:opacity 0.5s;
  -webkit-transition:opacity 0.5s;
}


#目标隐藏：目标{
不透明度：1；
过滤器：α（不透明度=100）；
过渡：不透明度0.5s；
-moz转换：不透明度0.5s；
-webkit转换：不透明度0.5s；
}

这肯定是更进一步了。因为这个图像最终将是一个手风琴标签，当它拉下手风琴的其余部分时，我需要它在点击时转换为“时尚传播”，然后当你再次点击它时，当手风琴关闭时，它再次回到图片。我认为这叫做切换？将

addClass（'active'）

更改为

toggleClass（'active'）

hmm，它在JSFIDLE上工作得非常好，但当我将所有东西都插入dream weaver时，它似乎不起作用。您正在加载jquery吗？您还需要将上面的代码包装在一个domready块中（请参见更新的答案）。这是我在JavaScript文档中设置代码的方式：$（document）.ready（function（）{$（'.img container'）。on（'click'，function（）{$（This.toggleClass（'active'）；}）；}）；我在标题中的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>

<div class="img-container">
  <a href="#target-hidden">
   <img src="http://i.imgur.com/wEYmgYC.jpg">
   <span id="target-hidden" class="img-hidden">
     <img src="http://i.imgur.com/XRUqimG.jpg">
   </span>
  </a>
</div>

#target-hidden:target {
  opacity:1;
  filter: alpha(opacity = 100);
  transition:opacity 0.5s;
  -moz-transition:opacity 0.5s;
  -webkit-transition:opacity 0.5s;
}