Question

当我将鼠标悬停在按钮上时，我想更改我的img src。

很少有与我相似的答案，

但我仍然无法弄明白。

<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

Answer 1

您可以使用CSS

执行此操作

＆＃13;

#Nav_Homepage span {
  background: url(https://dummyimage.com/20x20/000/fff.png&text=P) no-repeat;
  width: 20px;  /* your image width */
  height: 20px; /* your image height */
  display: inline-block;
}
#Nav_Homepage label {
  display: inline-block;
}
#Nav_Homepage:hover span {
  background: url(https://dummyimage.com/20x20/ff0000/ffffff.png&text=H) no-repeat;
}

＆＃13;

<button class='Nav' id="Nav_Homepage">
    <span class='img_Nav'></span>
    <label class='lb_Nav'> Homepage </label>
</button>

＆＃13;

Answer 2

如果您有新的图像源，请使用此代码。如果您想要使用多个图像更改图像，请使用此方法。

$('#btn_id')

.on('mouseenter', function() {
    $('#img_Homepage').attr('src', 'url_of_new_image');
})

.on('mouseleave', function() {
    $('#img_Homepage').attr('src', 'url_of_old_image');
});

Answer 3

＆＃13;

$(document).ready(function() {
  $("#Nav_Homepage").mouseenter(function() {
    $(this).children('img').attr("src", "./img/newimage.png");
  });
  $("#Nav_Homepage").mouseleave(function() {
    $(this).children('img').attr("src", "./img/Homepage.png");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class='Nav' id="Nav_Homepage">
    <img src="./img/Homepage.png" class='img_Nav' id="img_Homepage">
    <label class='lb_Nav'> Homepage </label>
</button>

＆＃13;

悬停时更改按钮上的图像src

3 个答案: