React Component:
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;
}
The issue at hand is when hovering over the cells, the background image should change to a different color rather than changing it. This could be due to the pre-existing background images assigned to those table cells. The other styles seem to work correctly except for the background-color change upon hover. Attempts were made with both background-color and background-image properties. Any insights on resolving this behavior?