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');
}