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

10-09 15:26
查看更多