当我悬停在按钮上时,我想要更改我的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>
当我悬停在按钮上时,我想要更改我的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>
#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>
background-image
,那么你必须单独使用 background-repeat
和 background-position
,如果你没有使用与 width
和 height
标签中使用的确切大小图像相同的图像。 - Super User$('#btn_id')
.on('mouseenter', function() {
$('#img_Homepage').attr('src', 'url_of_new_image');
})
.on('mouseleave', function() {
$('#img_Homepage').attr('src', 'url_of_old_image');
});
$(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>
$(this)
指的是这里的按钮 #Nav_Homepage
而不是其中的图片。 其次 当鼠标移开时,你只是在 mousover
时更改了图片的 src
,而没有将其改回原始图片。 - Mi-Creativity