我在自己的作品集网站上工作,在作品页面上,我有一个类似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/#/worksfade
如您所见,它在第一行上按预期工作,仅此而已。也许这是我需要在ember.js级别解决的问题?我已经尝试通过css通过css添加一个淡入淡出和注释框,或者通过jquery一个通过另一个添加css,而在所有被卡住的行上都无效,请帮忙。
好吧,据我所知,您尝试在项目上的悬停上制作淡入/淡出动画吗?
当前,您正在添加一个在悬停时提供额外样式的类。您最好仅使用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解决方案:更加平滑,而且肯定会更易于处理和维护。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句