0

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

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

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

这是我的图像和悬停 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;}

这是我使用悬停 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>
4

2 回答 2

1

jQuery解决方案

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

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

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

纯 CSS 解决方案（了解 img 尺寸）

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

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

希望这可以帮助 ;）

于 2013-05-30T08:40:42.307 回答
0

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

让我知道这有帮助吗？

于 2013-05-30T07:24:47.653 回答