Question

我正在使用Bootstrap响应主题开发Wordpress。

我的问题是我想在我的图像上悬停效果，但是当我将鼠标悬停在图像上时，悬停div的高度正在增加。

正如我所说，我正在使用自适应主题，但是当我在移动屏幕上打开它时，它没有响应，并且div的宽度增加到整页。我正在使用span3类来使图像响应。

这是我的Css for image和hover div：

.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;}

以下是我正在使用悬停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>

Answer 1

jQuery解决方案

正如@Rakesh所说，你可以用jQuery实现预期的行为： Demo

$('div.hoverimage').each(function()
{
    var width = $(this).prev().width();
    $(this).width(width);
});

注意：在Chrome中，这可以设置jQuery onDomReady（在jsFiddle选项中），我现在已经看到了......

纯CSS解决方案（知道img维度）

否则，如果您之前知道图像的宽度和高度（在本例中为270px），您可以执行以下操作： Demo 。

在这种情况下，我放置text-align:center以避免固定边距，并设置word-wrap:break-word以防止段落移出容器。

希望这会有所帮助;）

Answer 2

我更改了一些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;
    }

让我知道这有用吗？。

悬停div的高度越来越高

2 个答案:

jQuery解决方案

纯CSS解决方案（知道img维度）