悬停淡出不与砌体CSS工作
Hover fade not working with masonry CSS
我正在我的作品集网站上工作,在作品页面上,我有一个类似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//作品
当我添加图像淡入时,结果如下:
http://adminref.com//worksfade
正如您所看到的,它在第一行按预期工作,但仅此而已。也许这是一个问题,我需要纠正烬.js级别?我已经尝试通过css通过jquery或一个通过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浏览器的bug。这里有一个解决方法:
.img-wrap {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0,0,0); /* this will do the job */
}
注意这只是一个变通方法。
尽管如此,我强烈建议使用完整的CSS解决方案:更流畅,它肯定会更容易处理和维护。
- 为什么不'在JQuery中找到第二个css选择器的工作
- jquery滑块在css弹出菜单中工作
- JavaScript在更改css时停止工作
- 链接悬停css在不浮动时不在表浮动标题中工作
- 如何使Javascript中的CSS正常工作
- "npm运行构建:css"不能工作,而当我自己运行脚本时是可以的
- 为什么不是't my css `content:`在多个浏览器中工作,并总体上提高跨浏览器兼容性
- 如何使手风琴(CSS+javascript)工作
- CSS + jQ插件阻止AJAX调用/事件侦听器工作
- CSS 类在验证时只工作一次
- 如何在HTML / CSS中填充垂直和滚动中间窗格(Chrome可以工作,但不能Firefox)
- jQuery css"点击“;不会'更改日历中选定的月份后无法工作
- CSS没有'使用javascript向页面动态添加元素时无法工作
- JQuery图像滑块和CSS转换只能工作一次
- CSS和Javascript可以在内部服务器上工作,但不能在外部工作
- CSS,Java脚本在php中调用ajax后无法正常工作
- 如何将img维度从html移动到css并保持此滑块工作
- 如何在网页上以交互方式切换 CSS 工作表以进行测试/学习
- 悬停淡出不与砌体CSS工作
- 自动cookie条纯CSS工作良好,但需要延迟