我正在开发带有引导响应主题的Wordpress。
我的问题是我想在我的图像上有一个悬停效果，但是当我在图像上悬停时，悬停div的高度是增加的。
正如我所说的，我使用的是响应主题，但是当我在移动屏幕上打开它时，它没有响应，并且div的宽度增加到整个页面。我正在使用
下面是我的图像和悬停div的Css:
.image{position: relative;}.image img {max-width: 100%; max-height: 100%;}.hoverimage {position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);/* For IE 5.5 - 7*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);/* For IE 8*/-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
.image:hover .hoverimage { display: block;}.image_text {color:#FFFFFF;margin:60px;}
下面是我使用hover div的代码:
<li class="span3 image">
<img src="http://placehold.it/270x150" alt="" class="img-polaroid" /><div class="hoverimage img-polaroid"><p class="image_text"><a href="https://globalmanetwork.com/">globalmanetwork.com/</a></p></div>
</li>
<li class="span3 image">
<img src="http://placehold.it/270x150" alt="" class="img-polaroid" /><div class="hoverimage img-polaroid"><p class="image_text"><a href="https://globalmanetwork.com/">globalmanetwork.com/</a></p></div>
</li>
正如@rakesh所说，您可以使用jQuery:Demo实现预期的行为
$('div.hoverimage').each(function()
{
var width = $(this).prev().width();
$(this).width(width);
});
注意:在Chrome中，设置jQuery onDomReady（在jsFiddle选项中，我现在已经看到了。。。
否则，如果您先前知道图像的宽度和高度（在本例中，为270px)，您可以做如下操作:demo。
在本例中，我放置了一个
希望这有帮助）
我已经更改了一些CSS
试试这个；
.image {
margin:0px;
padding:0px;
position: relative;
}
.image img {
max-width: 100%;
max-height: 100%;
}
.hoverimage {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 97%;
background: rgba(0, 0, 0, 0.8);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.image:hover .hoverimage {
display: inline;
width:54%;
/*height:100%; */
}
.image_text {
color:#FFFFFF;
margin:60px;
}
告诉我这个有用吗？。
