skyleguy skyleguy - 10 months ago 58
HTML Question

how to use selectors with hover effects

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 class="pic2">
<img src="linkToThePicture2" class="imag">
<p>this should appear when the pic2 div is hovered</p>

And lets 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 Source

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;