html - 图像悬停不起作用 - 代码有什么问题？

Question

似乎我已经尝试了所有我能想到的方法来让这些图像链接在鼠标悬停时更改图像。现在只有主要的 navprint.png 出现了。就 html 和 css 而言，我是初学者，并且已经为这个问题苦苦挣扎了好几天。这是代码。非常感谢任何帮助。

html

<li class="navprint"><a href="printcategory.html"><img src="Images/navprint.png"      alt="print button" title="print button"></a></li>

CSS

.navprint {
    width: 160px;
    height: 30px;
    background-image: url("Images/navprint.png");
}

.navprint:hover {
    background-image: url('Images/navprinthov.jpg');
    width: 160px;
    height: 30px;
}

Answer 1

试试这个

<li class="navprint">
 <a href="printcategory.html">
   <img src="Images/navprint.png" alt="print button" title="print button" />
 </a>
</li>


.navprint {
    width: 160px;
    height: 30px;
    background-image: url("Images/navprint.png");
}

.navprint:hover {
    background-image: url('Images/navprinthov.jpg');
}