Question

我正在我的投资组合网站上工作，它应该是一个大型手风琴，图片作为标签。由于它是一个长页面，因此标签不会是链接。我是jquery的新手，所以我不确定如何让它与我的CSS一起工作。基本上，应该发生的是当您单击选项卡时，随着手风琴拉下描述，选项卡图像将转换为标题。我只希望在点击时发生转换。

可以看到过渡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;
}

Answer 1

您可以将: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>

Answer 2

使用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;
}

http://jsfiddle.net/Px52Y/10/

如何通过点击而不是悬停来激活交叉淡化？

2 个答案:

DEMO