Question

很多时候我正在尝试在引导程序中使用3列按钮来更改Hover中的图像。我已经尝试了一切，但没有任何工作，我发现的所有解决方案都破坏了Bootstrap的线条或导致我很多问题。有人可以帮我这么做吗？ http://s3.postimg.org/j1yibn3pv/Schermata_2015_08_04_alle_11_35_20.png

拜托，我很绝望！

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

您怎么看？

使用Bootstrap在Hover中更改图像按钮

2 个答案: