我试图在悬停时更改图像,我将默认图像的大小设置为108x100,而本应在悬停时更改的图像的大小为161x143,但是当我将鼠标悬停时,图像的确发生了变化,但没有放大,而是变得更小。
这是我的html(bootstrap)代码...
<div class="container-fluid">
<div class="row">
<div class="well" style="margin-bottom:0px;background-color:black;">
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="item active">
<div class="row" style="margin-left:8.3333%">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="graficki-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="stampa-svih-formata" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="web-dizajn" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<img id="kreativno-pisanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="pr" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="izrada-tv-i-radio-reklama" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="media-buying" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="3d-projektovanje" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="promocije-i-manifestacije" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="prevod-tekstova" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<img id="prikupljanje-i-izrada-dokumenata-za-potrebe-firme" class="img-circle img-responsive center-block" src="http://placehold.it/108x100" >
</div>
</div>
</div>
</div>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>
我的鼠标悬停更改...
$(document).ready(function(){
$("#graficki-dizajn").hover(function() {
$("#graficki-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#graficki-dizajn").attr("src","http://placehold.it/108x100");
});
$("#stampa-svih-formata").hover(function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/161x143");
}, function() {
$("#stampa-svih-formata").attr("src","http://placehold.it/108x100");
});
$("#web-dizajn").hover(function() {
$("#web-dizajn").attr("src","http://placehold.it/161x143");
}, function() {
$("#web-dizajn").attr("src","http://placehold.it/108x100");
});
$("#kreativno-pisanje").hover(function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#kreativno-pisanje").attr("src","http://placehold.it/108x100");
});
$("#pr").hover(function() {
$("#pr").attr("src","http://placehold.it/161x143");
}, function() {
$("#pr").attr("src","http://placehold.it/108x100");
});
$("#izrada-tv-i-radio-reklama").hover(function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/161x143");
}, function() {
$("#izrada-tv-i-radio-reklama").attr("src","http://placehold.it/108x100");
});
$("#media-buying").hover(function() {
$("#media-buying").attr("src","http://placehold.it/161x143");
}, function() {
$("#media-buying").attr("src","http://placehold.it/108x100");
});
$("#3d-projektovanje").hover(function() {
$("#3d-projektovanje").attr("src","http://placehold.it/161x143");
}, function() {
$("#3d-projektovanje").attr("src","http://placehold.it/108x100");
});
$("#promocije-i-manifestacije").hover(function() {
$("#promocije-i-manifestacije").attr("src","http://placehold.it/161x143");
}, function() {
$("#promocije-i-manifestacije").attr("src","http://placehold.it/108x100");
});
$("#prevod-tekstova").hover(function() {
$("#prevod-tekstova").attr("src","http://placehold.it/161x143");
}, function() {
$("#prevod-tekstova").attr("src","http://placehold.it/108x100");
});
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").hover(function() {
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/161x143");
}, function() {
$("#prikupljanje-i-izrada-dokumenata-za-potrebe-firme").attr("src","http://placehold.it/108x100");
});
});
还有jsfiddle ... http://jsfiddle.net/s2b47/
我没有放大相同的图像,这两个图像在外观和分辨率上都不同...我如何才能实现想要的放大效果?
最佳答案
问题在于.img responsive
类正在缩小布局以保持其响应速度。您可以重写它,但是我不确定您是否会非常喜欢此结果:
的CSS
.img-responsive {
max-width: 90%;
}
.img-responsive:hover {
max-width: 100%;
}
.well {
max-height: 60px;
}
这是一个DEMO
我建议您重新开始,也许使用容器导航栏的更多固定值,以使其不会移动。同样,响应性迫使图像要远远小于其实际大小,并且在某些显示器上,人们很可能无法识别图像上所描绘的内容。
关于javascript - 悬停时更改图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24196757/