how to use selectors with hover effects

Question

I am trying to make it so when a certain image is hovered, certain text shows up!

So lets say I have this HTML:

<div class="container">
  <div class="pic1">
    <img src="linkToThePicture" class="imag">
    <p>this should appear when the pic1 div is hovered</p>
  </div>
  <div class="pic2">
    <img src="linkToThePicture2" class="imag">
    <p>this should appear when the pic2 div is hovered</p>
  </div>
</div>

And let's say I also have this CSS:

div {
  height: 150px;
  width: 150px;
  /*makes all the picture containers same size*/
  float: left;
  display: inline;
  /*makes all the pictures come one after another in a row*/
}

p {
  opacity: 0;
  /*do this so that all the p's are invisible at first*/
}

.container {
  height: 1000px;
  width: 1000px;
  /*arbitrary settings for height and width of the container, if i am correct, this will override the above mentioned div settings*/
}

.imag {
  width: 150px;
  height: 150px;
  /*makes all pics same size*/
}


/*now i would need something here to make it so when pic1 is hovered, it p element would change to have "opacity: 1;". My original thought would be this:*/

.div1:hover .div1 < p {
  opacity: 1 !important;
  /*but that didnt work!*/
}

So does anyone know the correct way to do this? Thanks!

Answer 1

The simplest solution would be to change .div1:hover .div1 < p { to .pic1:hover p.

Your code doesn't work for a couple reasons:

1. There is nothing with the class "div1"
2. < has no significance in a CSS selector

.pic1:hover p means "any p that is inside an element with the class pic1 that is being hovered."

If you wanted to clean up the code a little more, you could define a pic class like this and add it to both divs:

.pic {
  height: 150px;
  width: 150px;
}

That way, you wouldn't need to reset the size for the container element. Then, add this declaration and it will apply to both divs:

.pic:hover p {
    opacity: 1;
}

Answer 2

You should be able to get away with using a sibling selector, since they are directly adjacent in markup:

.container .imag:hover+p {
    opacity: 1;
}