更改悬停时的图像 [英] Changing images on hover
本文介绍了更改悬停时的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图更改悬停时的图像，我把默认图像尺寸为108x100和假设改变为悬浮的图像是尺寸161x143，但当我悬停图像确实改变，而不是放大它变得更小
这是我的html（bootstrap）代码...
< div class =container-fluid>
< div class =row>
< div class =wellstyle =margin-bottom：0px; background-color：black;>
< div id =myCarouselclass =carousel slide>
< div class =carousel-inner>
< div class =item active>
< div class =rowstyle =margin-left：8.3333％>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =graficki-dizajnclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =stampa-svih-formataclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =web-dizajnclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =kreativno-pisanjeclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =prclass =img-circle img-responsive center-blocksrc =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-reklamaclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =media-buyingclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =3d-projektovanjeclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =promocije-i-manifestacijeclass =img-circle img-responsive center-blocksrc =http://placehold.it/108x100>
< / div>
< div class =col-xs-1 col-sm-1 col-md-1 col-lg-1>
< img id =prevod-tekstovaclass =img-circle img-responsive center-blocksrc =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-firmeclass =img-circle img-responsive center-blocksrc =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： .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 ，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 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
我建议你重新开始，您的容器navbar的值，以便它不会移动。此外，这种感觉使图像远小于其实际尺寸，在某些显示器上，人们很可能无法识别图像上所描绘的内容。
I am trying to change images on hover,i put the default image at size 108x100 and the image that was suppose to change into on hover is at size 161x143 but when i hover image does change but instead of enlarge it gets even smaller.
Here is my html(bootstrap) code...
<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>My jquery for hover change...
$(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"); }); });And jsfiddle...http://jsfiddle.net/s2b47/
I am not enlarging the same image,the two images are different by appearance and by resolution...How can i achieve enlarge effect that i want?Any help is appreciated.
解决方案The problem is that the
.img responsiveclass is shrinking your layout to keep it responsive. You can override it , though, but I'm not sure you'll like the result much:CSS
.img-responsive { max-width: 90%; } .img-responsive:hover { max-width: 100%; } .well { max-height: 60px; }Here is a DEMO
I suggest you start out again, maybe use more fixed values of your container navbar so that it won't move. Also, the respnsiveness forces the images to be quite less than their actual size and on some displays people will most likely be unable to recognize what's depicted on the image.
这篇关于更改悬停时的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
