我试图在悬停时更改图像，我将默认图像的大小设置为 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>
我的悬停更改 jquery...
$(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/