-1

I want to change my <p> tag's color to white while hover on the class "cards". Here is my code of .js file

<div className='p-3 cards' >
            <div className='d-flex justify-content-around align-items-center'>
                <div>
                    <img style={{ height: '70px' }} src={blog.image} alt="" />
                </div>
                <div>
                    <h5>{blog.name}</h5>
                    <p >{blog.date}</p>
                </div>
            </div>
            <div >
                <h4 className='p-3'>{blog.title}</h4>
                <p >{blog.description}</p>
            </div>
 </div>

Here is the code of my .css file

.cards{
   border: 1px solid lightgray;
   border-radius: .3em;
}
.cards p{
   color: slategray;
}
.cards:hover {
   background-image:linear-gradient(45deg, #1cc7c1, rgb(105, 173, 175)) ;
   color: whitesmoke;
}

Here is the output of before hover (https://i.ibb.co/RT9tzVZ/d.jpg)

And here is the output after hover (https://i.ibb.co/hgqDtzz/d1.jpg)

Mahmudul Hasan
  • 122
  • 8
  • the attribute is `class` not `className` - and, looking at the pictures, your actual code seems to work fine – Bravo Jul 28 '21 at 03:10
  • hey Mahmudul, I think you can find your answer here: https://stackoverflow.com/questions/12597106/css-on-hover-change-child-background – kengru Jul 28 '21 at 03:11
  • or here: https://stackoverflow.com/questions/5061940/changing-the-child-elements-css-when-the-parent-is-hovered – kengru Jul 28 '21 at 03:12
  • or here: `.cards:hover p { color: white;}` – Bravo Jul 28 '21 at 03:13
  • https://codesandbox.io/s/beautiful-beaver-gym3r?file=/src/styles.css – DecPK Jul 28 '21 at 03:16

2 Answers2

1

You can easily do this using the following code

DEMO

.cards:hover p {
  color: white;
}
DecPK
  • 24,537
  • 6
  • 26
  • 42
0

You need to add one more CSS:

.cards:hover p {
 background-color: #fff;
}
Nitesh
  • 1,490
  • 1
  • 12
  • 20