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/
效果类似
http://pp.163.com/square/,
鼠标放上到图片上面滚动显示标题,注意:http://heartpic.net/ 中的图片不固定,所以标题要与图片高度、宽度一致。
额,基本正确,不过最后一行用.css
的话记得把_hHIh
改为_hHIh+'px'
。
-----
额..你是想说有些图片'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'); });
我用审查元素修改了发现木有问题,不过你说的如果不是这个问题的话那就当我没说吧,恩哼~