小贝子编程

使用引导程序悬停中的"position: absolute"切换或更改图像



我正在使用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" alt="Immagine Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
					<img class="img-responsive hover" src="img/box-servizi/promozioni-h.jpg" alt="Immagine Mouse Hover Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
				</a>
			</div><!-- /promozioni -->
		</div><!-- /box-servizi -->
	</div><!-- /container -->
<!-- /BOX SERVIZI -->

简短回答

将以下内容添加到你的CSS中:

#promozioni
{
    padding-top: 56.25%;
}

计算padding-top的适当值，将高度除以图像的宽度;我在这个例子中使用了一张1280 × 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的一些编码技巧

  1. class="container"div应该跟在class="row"div后面，所以在你的代码中，把#box-servizidiv改成:

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

  2. 当你在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宽

我已经解决了这个问题:

/* 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 -->

你觉得怎么样?

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium