Question

我希望在鼠标进入时更改图像，并在鼠标离开时更改图像。我几个小时都无法处理。请帮助：）

我想改变＆＃34; yazilogo2.png＆＃34;与＆＃34; yazilogo_active.png＆＃34;。

这是我的代码：

<style>

    #topContainer {
        background-image:url("yaziylabin_header1.png");
        width:100%;
        background-size:cover;
        background-position:center;
        margin-top:51px;
    }

    .logo {
        height:80px;
    }

    .logoDiv {
        margin-top:15px;
    }
</style>

<body>
    <div class="container contentContainer" style="padding-top:70px;" id="topContainer">    
        <div class="row">
            <div class="col-md-6 col-md-offset-3 logoDiv">
                <img class="logo center-block" src="yazilogo2.png" />
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script>
        $(".contentContainer").css("min-height", 0.55*($(window).height()));
    </script>
</body>

Answer 1

您可以更改图像元素的src属性以更改图像。您可以使用jQuery的hover（）方法进行mouseenter和mouseleave事件。

$('.logo').hover(
  // function for mouseenter
  function () { $(this).attr("src", "yazilogo_active.png");},
  // function for mouseleave
  function () {$(this).attr("src", "yazilogo2.png");
});

Answer 2

$(".logo").hover(
function(){
    $(this).attr("src","pic1.png");
},
function(){
    $(this).attr("src","pic2.png");
});

你可以找到。悬停（）here.

鼠标进入时无法更改图像

2 个答案: