悬停褪色不适用于砌体 CSS

Question

我在我的作品集网站上工作，在作品页面上，我有一个类似 pinterest 的砌体布局，上面有我的一些作品的图像。在图像悬停时，我使用 css 显示标题框，这可以按预期工作。但是，我希望图像在没有标题框失败的情况下褪色，并且当我在图像上添加悬停褪色时，无论是通过 CSS 还是 javascript/jquery，它只能在第一行图像上正常工作。或者更确切地说，它在所有行上都能正常工作，但它会破坏除第一行之外的任何行上的标题框。由于我正在使用的行，这肯定是有问题的，因为如果我将 css 更改为只有一行，它会按预期工作。

这是其中一个图像面板的代码：

<div class="panel panel-primary work-panel image text-center">
  <script id="metamorph-29-end" type="text/x-placeholder"></script>
    <div class="panel-image hide-panel-body hide-panel-footer">
  <div class="img-wrap">
      <img src="./imgs/abstract-realism.jpg" data-bindattr-1="1" class="panel-image-preview">
  <div class="img-overlay">
  <h4><script id="metamorph-30-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-30-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-31-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-31-end" type="text/x-placeholder"></script></p>
  </div>
  </div>
    </div>
    <div class="panel-body">
      <h4><script id="metamorph-32-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-32-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-33-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-33-end" type="text/x-placeholder"></script></p>
    </div>
  </div>

这是控制标题框的 css：

.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
position: absolute;
width:100%;
z-index:9999;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.9;
filter: alpha(opacity = 90);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}

这是控制淡入淡出的ember视图上的jquery（以$（'.img-wrap'）开头的函数：

    App.WorksfadeView = Ember.View.extend({
        didInsertElement : function(){
        Ember.run.scheduleOnce('afterRender', this, function(){
                $(function() {
                        $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false, theme:    'dark_rounded', allow_resize: false});
                        $('.work-panel.image').on('click', function(e) {
                                var img = $(this).find('img').attr('src');
                                var name = $(this).find('h4').text();
                                var desc = $(this).find('p').text();
                                $.prettyPhoto.open(img,name,desc)
                        });
                      $('.img-wrap').hover(function(){
                                      $(this).find('img').addClass("faded");
                              }, function(){
                                      $(this).find('img').removeClass("faded");
                      });
                });
    });
  }
});

您可以在此处找到仅带有标题的作品页面（以显示它本身可以工作）：

http://adminref.com/#/works

这就是我添加图像淡入时发生的情况：

http://adminref.com/#/worksfade

如您所见，它在第一行按预期工作，仅此而已。也许这是我需要在 ember.js 级别纠正的问题？我尝试通过 css 添加淡入淡出和评论框，既可以通过 jquery 也可以通过 jquery 添加另一个通过 css，但在我卡住的所有行上都没有任何效果，请帮忙。

Answer 1

好吧，如果我理解得很好，您会尝试在您的项目上悬停时制作淡入/淡出动画？

目前，您正在添加一个在悬停时提供额外样式的类。 你最好只使用 CSS 来做到这一点（这样会比 javascript 事件更容易管理）。

例子：

.panel-image img.panel-image-preview {
  width: 100%;
  border-radius: 2px 2px 0px 0px;
  transition: opacity .2s ease-in-out; /* you may use prefixes */ 
}
.panel-image:hover img.panel-image-preview {
  opacity: .5;
}
.panel-image .img-overlay {
  background-color: #000;

bottom: 0;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 9999;
  transition: opacity .2s ease-in-out; /* you may use prefixes */
}
 .panel-image:hover .img-overlay {
  opacity: 1;
}

我只是在需要在悬停时进行过渡的元素上添加了过渡，并在悬停时进行了样式修改（而不是在您使用 javascript 添加的类上）。所以你必须从你的 JS 代码中删除类切换。

更新： 您显然遇到了 Chrome 错误。这是一个解决方法：

.img-wrap {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0,0,0); /* this will do the job */
}

请注意，这只是一种解决方法。

不过，我还是强烈建议使用完整的 CSS 解决方案：更流畅，并且肯定会更容易处理和维护。