使用 Bootstrap 更改悬停中的图像按钮答案

【问题标题】：Change image button in Hover with Bootstrap使用 Bootstrap 更改悬停中的图像按钮
【发布时间】：2015-08-04 09:39:58
【问题描述】：

很多时候我试图在引导程序中有 3 列按钮来更改悬停中的图像。我已经尝试了所有方法，但没有任何效果，我发现的所有解决方案都破坏了 Bootstrap 的界限或给我带来了很多问题。有人可以帮我做到这一点吗？ http://s3.postimg.org/j1yibn3pv/Schermata_2015_08_04_alle_11_35_20.png

拜托，我很绝望！

【问题讨论】：

你能用代码创建一个jsfiddle吗？按钮的标签是什么？
js 是 javascript 吗？它与所有浏览器兼容吗？你能告诉我怎么做吗？
jsfiddle - jsfiddle.net - 包括您的 html、css 和 js（如果在适当的块中有一个），保存 fiddle 并在您的任务中提供指向它的链接。这样我们就能看到您遇到了什么问题
我不知道该怎么做，我尝试过使用背景图像和两个绝对位置的 img，但没有工作。

标签： image twitter-bootstrap hover multiple-columns

【解决方案1】：

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

#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;
}

【讨论】：

你的代码对我有用 jsfiddle.net/et3rp7w8/1 。悬停时图像会发生变化。
我认为设置固定高度不好，它破坏了 Bootstrap 的线条..

【解决方案2】：

我的解决方案：

/* ==========================================================================
   SERVIZI
   ========================================================================== */

#servizi-bottom {
	margin-top: 50px;
	margin-bottom: 40px;
}

#servizi-bottom>.container>a>div {
	padding: 2.205% 0%;
}

#servizi-bottom h3 {
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 0.1em;
	font-style: italic;
}

.servizi-button {
	border: 10px solid rgba(0, 0, 0, 0);
}


/* Promozioni
   =================================== */

#box-promozioni {
	background: transparent url("../img/box-servizi/promozioni.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-promozioni {
	background-image: url("../img/box-servizi/promozioni-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-promozioni h3 {
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;
}

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

你怎么看？

【讨论】：