CSS Hover Effect doesn't working as I want

July 24, 2022

I have two divs, one parent and one child. When hover the parent div element, i want to change background-color of parent div element. But hover effect only work if i hover on the child div and only changes the background color of child div element.

I want to change the background-color of parent div element when hover on it.

Here is my code:

Button.js:

import React from "react";
import classes from "./Buttons.module.css";

export function ButtonHorizontal() {
  return (
    <div className={classes.buttonHorizontal}>
      <div className={classes.text}>CLICK</div>
    </div>
  );
}

and Buttons.module.css:

.buttonHorizontal {
  background-color: #ffffff2c;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  padding: 10px 25px;
}
.buttonHorizontal :hover {
  background-color: #ffffff98;
}
.text {
  font-size: 1.3rem;
  font-weight: 900;
  display: inline;
  padding-left: 10px;
  
}