var _hHIw = $(".home article.hover img").width();
$(".home article.hover h2 a").width(_hHIw);
var _hHIh = $(".home article.hover img").height();
$(".home article.hover h2 a").css('line-height',_hHIh)
a标签的行高、宽度,与img的高度、宽度一致,不知道上面代码是否正确
按照楼下的方法,没有成功!
还是给上地址吧:
效果类似
鼠标放上到图片上面滚动显示标题,注意:http://heartpic.net/ 中的图片不固定,所以标题要与图片高度、宽度一致。
额..你是想说有些图片'hover'的时候黑色背景的长度和图片的不一致是么?
css做如下修改
.home article h2 a {
position:absolute;
left:0;
top:0;
z-index:2;
text-align: center;
background: url(images/bg-black-transparent-1x1.png);
color: white;
overflow:hidden;
}
先保证到左上角再说,只要设置每一个a标签的line-height和相应图片的height一致,width和width 一样就好了。jQ的代码如下
$.each($('article'), function(i, item) {
var a = $('h2 a', item), i = $('img', item);
a.css('width', i.width()+'px');
a.css('line-height', i.height()+'px');
});
我用审查元素修改了发现木有问题,不过你说的如果不是这个问题的话那就当我没说吧,恩哼~
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。