如何解决悬停时背景颜色没有变化(reactjs)

React组件

import React from "react"

const Category = () => {
    return (
        <table cellSpacing={25}>
            <tr>
                <td id="fruits">Fruits & Vegetables</td>
                <td id="pc"> Personal Care</td>
                <td id="dairy">Dairy Products</td>
            </tr>
            <tr>
                <td id="stap">Staples</td>
                <td id="snack">Snacks</td>
                <td id="stat">Stationery</td>
            </tr>
            <tr>
                <td id="bake">Bakery</td>
                <td id="home">Home Care</td>
                <td id="bev">Beverages</td>
            </tr>
        </table>
    );
}

export default Category; 

CSS

#fruits{
  background-image: url("C:\Users\thish\OneDrive\Desktop\travel_advisor\src\image_src\fruits_blur.png") ;
}
#pc{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\personal_care_blur.webp");
}
#dairy{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\dairy.PNG");
}
#stap{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\stap.PNG");
}
#snack{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\snack.PNG");
}
#stat{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\stat.PNG");
}
#bake{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\bake.PNG");
}
#home{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\home.PNG");
}
#bev{
  background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\bev.PNG");
} 

td:hover{
cursor: pointer;
background-image: url("C:\Users\OneDrive\Desktop\travel_advisor\src\image_src\71AC0A.png");
text-decoration: underline;
}

当悬停在上面时，背景图片应该变成背景色。但除了悬停时的bg-color，其他的样式都能工作。我同时尝试了bg-color和bg-img。这是否因为表格中的单元格已经有了背景图片而发生的？