Измените изображение src на кнопке при наведении курсора [duplicate]

7 принят

Вы можете сделать это с помощью CSS

#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;
}
<button class='Nav' id="Nav_Homepage">
    <span class='img_Nav'></span>
    <label class='lb_Nav'> Homepage </label>
</button>

6

если у вас есть новый источник изображения, просто используйте этот код. используйте этот метод, если хотите изменить изображение с несколькими изображениями.

$('#btn_id')

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

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

$(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");
  });
});
<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>

JavaScript, HTML, CSS,

javascript,html,css,

3

Ответов: 3

7 принят

Вы можете сделать это с помощью CSS

#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;
}
<button class='Nav' id="Nav_Homepage">
    <span class='img_Nav'></span>
    <label class='lb_Nav'> Homepage </label>
</button>

6

если у вас есть новый источник изображения, просто используйте этот код. используйте этот метод, если хотите изменить изображение с несколькими изображениями.

$('#btn_id')

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

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

$(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");
  });
});
<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>

JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика