Background color not changing on hover (reactjs)

Question

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

While hovering on the , the background image should change into background color. But all the other styles work other than bg-color while hovering. I've tried both bg-color and bg-img. Does this happen because of the background image which have been already given to those cells of the table?

score 1 · Answer 1 · answered Aug 20 '22 at 09:05

Add !important to the hover style like this:

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

Working Demo:

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

ReactDOM.render(<Category />, document.querySelector('.react'));

#fruits {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#pc {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#dairy {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#stap {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#snack {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#stat {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#bake {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#home {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}
#bev {
  background-image: url("https://asia.olympus-imaging.com/content/000107507.jpg");
}

td:hover {
  cursor: pointer;
  background-image: url("https://burst.shopifycdn.com/photos/city-lights-through-rain-window.jpg?width=1200&format=pjpg&exif=1&iptc=1") !important;
  text-decoration: underline;
  color: white;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Hanoj B · Answer 2 · 2022-08-20T09:15:52.517

td:hover {
  background-color: blue !important;
}

<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>

Background color not changing on hover (reactjs)

2 Answers2