Will Ashley Will Ashley - 10 months ago 46
CSS Question

CSS hover effect not working when using ~, +, or >

I am trying to change the hover selector I have now so that when I hover over the image or the "category card" div, the p text will come into view. I have tried a few things but to no avail.

<div className="category-card" id="lessons-card">
<div className="category-text" id="lessons">
<p className="category-card-p lessons-p">Lorem ipsum</p>
<img src= "assets/img.jpeg" className="category-image" />

I have tried the following with ~, > and +

.category-card:hover ~ .category-card-p{
transform: scale(1.2);
opacity: 1;


You're not quite hitting the meaning of those selectors:

  • ~ means general sibling selector. The element must be at the same hierarchy level as the first selector and be somewhere after the first selector in the markup to qualify. .category-card-p is a descendant, so that won't work.

  • > means direct descendant selector. The element must be an immediate child of the first selector to qualify. .category-card-p is not an immediate child, it is a grand-child, if you will, so that won't work.

  • + means adjacent sibling selector. The element must be at the same hierarchy level and must be the very next element at that hierarchy level to qualify, so that won't work.

.category-card:hover .category-card-p would work, as would .category-card:hover .category-text .category-card-p. Even .category-card-p by itself would work, assuming you don't have another, more specific selector at play.

Also as j08691 mentioned, the HTML attribute for classes is class="", not className="". .className="" won't work, but a cursory check in an HTML validator would catch that right off the bat.