针对Bootstrap 3的响应式图像鼠标hover是否有任何解决方案?
这是我的代码: http : //jsfiddle.net/4gac7/
.image{ background-image:url("https://placehold.it/350x150/000/fff"); width:350px; /* responsive possible ?? */ height:150px; } .image:hover{ background-image:url("https://placehold.it/350x150/ccc/fff"); }
谢谢!
它需要更多HTML代码,但您可以使用与https://alistapart.com/article/creating-intrinsic-ratios-for-video/相同的基本技术。 您需要在某处设置宽度(因为背景图像没有内部尺寸),但这可能来自父元素。 实质上:
.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("https://sofzh.miximages.com/jquery/fff.png"); background-size: cover; } .element-to-stretch:hover { background-image: url("https://placehold.it/350x150/ccc/fff"); }
这里有一些关于background-size的文档 。 其次,纵横比可能很棘手:如果比例为2:1(因此图像宽度是其高度的两倍),那么padding-bottom
的.wrapper-with-intrinsic-ratio
将为50%
。 用(高度÷宽度)×100来计算。例如,你的350×150px图像将是padding-bottom: 42.857%;
对于150x350px it'd be 233.333%
。
或者,您可以使用两个img元素。 笨重,但……
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; }
或者你可以使用javascript。
或者你可以使用一个简单的onmouseover html标签,并从bootstrap给它一类img-responsive。
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
以上就是jQuery教程分享Bootstrap 3 mouseover图像响应相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/562001.html