在使用 Bootstrap 悬停时使用“位置：绝对”切换或更改图像

Posted 2023-05-08

技术标签:

【中文标题】在使用 Bootstrap 悬停时使用“位置：绝对”切换或更改图像【英文标题】：Toggle or change image with "position: absolute" in Hover with Bootstrap 【发布时间】：2015-10-23 05:48:20 【问题描述】：

我正在使用 Bootstrap 并尝试在悬停时使用 CSS 在两个 position: absolute 图像之间进行转换。我已经尝试了具有固定 height: 和 position: absolute 属性的解决方案，但这会导致行在 Bootstrap 中重叠。

有人可以帮助我吗？ http://s13.postimg.org/3mf4kxcav/Schermata_2015_07_31_alle_15_53_38.png

#box-servizi 
	background: #ffffff;
	margin: 50px 0px;
	padding-bottom: 50px;
	padding-top: 20px;
	overflow: hidden;


#box-servizi>div 
	margin-top: 25px;
	height: 100px;
	position: relative;
	padding-right: 50px;


#box-servizi>div>a>img
    display: block;
    position: absolute;
    /* transitions */
    -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;



#box-servizi>div>a>img.normal
    filter: alpha(opacity=100); /* IE stuff */
    opacity: 1;
    z-index: 2;

#box-servizi>div>a>img.hover
    filter: alpha(opacity=0); /* IE stuff */
    opacity: 0;
    z-index: 1;

/* hover */
#box-servizi>div>a:hover>img.normal
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 1;

#box-servizi>div>a:hover>img.hover
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 2;

	<div class="container">
		<div id="box-servizi" class="section-shadow">

			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="promozioni">
				<a href="#" title="Scopri tutte le nostre Promozioni">
					<img class="section-shadow img-responsive normal" src="img/box-servizi/promozioni.jpg"  title="Scopri tutte le nostre Promozioni!" />
					<img class="img-responsive hover" src="img/box-servizi/promozioni-h.jpg"  title="Scopri tutte le nostre Promozioni!" />
				</a>
			</div><!-- /promozioni -->
		</div><!-- /box-servizi -->
	</div><!-- /container -->
<!-- /BOX SERVIZI -->

【问题讨论】：

【参考方案1】：

简答

将以下内容添加到您的 CSS：

#promozioni

    padding-top: 56.25%;

通过将图像的高度除以宽度来计算padding-top的正确值；在此示例中，我使用了 1280 x 720 的图像，因此 720 / 1280 = .5625；或 56.25%。这是 16:9 的纵横比。

从您的 #box-servizi>div 选择器中删除以下属性：

height: 100px;

(1) 在 Bootstrap 或任何其他响应式框架中使用固定值总是会导致问题，因为不同大小的显示会改变事物的大小； (2) 你不再需要它了。

说明

在 CSS 块模型中，包含绝对定位 (position: absolute;) 内容的块将不占用文档流中的空间；对于所有意图和目的，它将是 0px 宽和 0px 高。因此，您必须告诉浏览器用空白空间占据图像所在的区域，以使其他一切正常流动。有两种方法可以做到这一点：使用height: 属性（坏主意，尤其是在响应式设计中），或者使用padding-top: 属性（在这种情况下是正确的方法）。

Bootstrap 的一些编码技巧

class="container" div 后面应该跟一个class="row" div，所以在你的代码中，将#box-servizi div 改为：

<div class="row section-shadow" id="box-servizi">

在 Bootstrap 网格中指定列时，应从最小的网格元素开始，然后从那里向上：

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>

可以进一步优化如下：

<div class="col-xs-12 col-sm-4"></div>

从这个示例中，您可以看到，一旦您设置了列宽 (col-sm-4)，较大的列尺寸仍将是 4 个网格宽，直到您选择不同的网格宽度。因此，如果尺寸 -sm- 和更高的尺寸都是 4 格宽，只需使用 col-sm-4 并停在那里；其余的（col-md、col-lg）也都是 4 宽。

【讨论】：

它对我不起作用。我添加了 '#box-servizi>div position: relative; padding-right: 50px;填充顶部：4％；底部填充：4%； ' 但结果是这样的：s29.postimg.org/h4pk3usbr/code.jpg【参考方案2】：

我已经解决了这个解决方案的问题：

/* Servizi
   =================================== */

#box-servizi 
	background: transparent url("../img/box-servizi/servizi.jpg") no-repeat;
	background-size:cover;
	text-shadow: 1px 1px 10px black;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-servizi 
	background-image: url("../img/box-servizi/servizi-hover.jpg");
	text-shadow: 1px 1px 10px white;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-servizi h3 
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;


/* Test Drive
   =================================== */

#box-testdrive 
	background: transparent url("../img/box-servizi/testdrive.jpg") no-repeat;
	background-size:cover;
	text-shadow: 1px 1px 10px black;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;



a:hover #box-testdrive 
	background-image: url("../img/box-servizi/testdrive-hover.jpg");
	text-shadow: 1px 1px 10px white;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-testdrive h3 
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;


/* Contatti
   =================================== */

#box-contatti 
	background: transparent url("../img/box-servizi/contatti.jpg") no-repeat;
	background-size:cover;
	text-shadow: 1px 1px 10px black;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;



a:hover #box-contatti 
	background-image: url("../img/box-servizi/contatti-hover.jpg");
	text-shadow: 1px 1px 10px white;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-contatti h3 
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;


/* Tagliando
   =================================== */

#box-tagliando 
	background: transparent url("../img/box-servizi/tagliando.jpg") no-repeat;
	background-size:cover;
	text-shadow: 1px 1px 10px black;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;



a:hover #box-tagliando 
	background-image: url("../img/box-servizi/tagliando-hover.jpg");
	text-shadow: 1px 1px 10px white;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-tagliando h3 
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;


/* Officina
   =================================== */

#box-officina 
	background: transparent url("../img/box-servizi/officina.jpg") no-repeat;
	background-size:cover;
	text-shadow: 1px 1px 10px black;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;



a:hover #box-officina 
	background-image: url("../img/box-servizi/officina-hover.jpg");
	text-shadow: 1px 1px 10px white;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;


a:hover #box-officina h3 
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;

<!-- !BOX SERVIZI -->
	<div class="row" id="servizi-bottom">
		<div class="container">

			<a href="#" title="Scopri tutte le nostre Promozioni">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-promozioni">
					<h3>promozioni</h3>
				</div>
			</a><!-- /box-promozioni -->

			<a href="#" title="Tutto ciò che offriamo">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-servizi">
					<h3>servizi</h3>
				</div>
			</a><!-- /box-servizi -->

			<a href="#" title="Tutto sui nostri Test Drive">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-testdrive">
					<h3>test drive</h3>
				</div>
			</a><!-- /box-testdrive -->


			<a href="#" title="Scopri come Contattarci!">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-contatti">
					<h3>contatti</h3>
				</div>
			</a><!-- /box-contatti -->

			<a href="#" title="Tagliando">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-tagliando">
					<h3>tagliando</h3>
				</div>
			</a><!-- /box-tagliando -->

			<a href="#" title="Le nostre Officine">
				<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-officina">
					<h3>officina</h3>
				</div>
			</a><!-- /box-officina -->



		</div><!-- /container -->
	</div><!-- /row -->
<!-- /BOX SERVIZI -->

你怎么看？

【讨论】：

以上是关于在使用 Bootstrap 悬停时使用“位置：绝对”切换或更改图像的主要内容，如果未能解决你的问题，请参考以下文章

如何在悬停时制作 Bootstrap 的下拉菜单？

Bootstrap 在悬停时折叠手风琴

Bootstrap 的工具提示在悬停时将表格单元格向右移动一点

如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？

在悬停时制作 Twitter Bootstrap 菜单下拉菜单，而不是轻松点击（解决方案）

Bootstrap 4.1中悬停时的下拉菜单