Question

Bootstrap 3的响应式图像鼠标悬停是否有任何解决方案？

.image{
background-image:url("http://placehold.it/350x150/000/fff");
width:350px; /* responsive possible ?? */
height:150px; 

}
.image:hover{
background-image:url("http://placehold.it/350x150/ccc/fff");
}

谢谢！

Answer 1

它需要更多HTML代码，但您可以使用与http://alistapart.com/article/creating-intrinsic-ratios-for-video/相同的基本技术。您需要在某处设置宽度（因为背景图像没有内部尺寸），但这可能来自父元素。基本上：

<div class="wrapper-with-intrinsic-ratio"><div class="element-to-stretch"></div></div>

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 20%; /* Adjust this to suit the aspect ratio of the image */
    height: 0;
    width: 100%;
}
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("http://placehold.it/350x150/000/fff");
    background-size: cover;
}
.element-to-stretch:hover {
    background-image: url("http://placehold.it/350x150/ccc/fff");
}

这是some documentation on background-size。其次，宽高比可能很棘手：如果比例是2：1（因此图像的宽度是高的两倍），padding-bottom上的.wrapper-with-intrinsic-ratio将是50%。使用（高度÷宽度）×100进行计算。例如，您的350×150px图像为padding-bottom: 42.857%;，150x350px it'd be 233.333%为<div> <img src="normal.jpg" alt="" class="normal"><img src="hover.jpg" alt="" class="hover"> </div> div img { max-width: 100%; height: auto; } div img.normal, div:hover img.hover { display: block; } div img.hover, div:hover img.normal { display: none; }。

或者，您可以使用两个img元素。笨重但是......

{{1}}

或者你可以使用javascript。

Answer 2

或者你可以使用一个简单的onmouseover html标签＆amp;从bootstrap给它一类img-responsive。

＆＃13;

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="col-lg-6">
<img src="http://placehold.it/350x150/000/fff" onmouseover="this.src='http://placehold.it/350x150/ccc/fff'" onmouseout="this.src='http://placehold.it/350x150/000/fff'" class="img-responsive">
</div>

＆＃13;

http://jsfiddle.net/McKmillions/7t63cja2/

Bootstrap 3 mouseover图像响应

2 个答案: