javascript - 悬停时更改按钮上的图像源

标签 javascript html css

<分区>

当我将鼠标悬停在按钮上时,我想更改我的 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>

最佳答案

你可以使用 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>

关于javascript - 悬停时更改按钮上的图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44017395/

相关文章:

javascript - 如何通过突出显示的位置获取该行的文本

javascript - 使用 Zurb Foundation 和 Symfony2

javascript - 如何在 Android WebView 的 Web 应用程序端使用 backpress 事件?

html - 只想让模式中的关闭按钮溢出可见

css - 有没有一种使用 CSS 实现此目的的简写方法?

php - 使用查询值更改 YouTube 嵌入代码中的视频 ID

php - 压缩包含 php、javascript、html 和 css 的网页

php - 尝试使用 html 表单和 php 更新 mysql

javascript - JqueryUI (Ajax) Hide() 有效,Show() 无效

css - JavaFX 从资源文件夹加载 CSS 样式