image:hover is not working

Question

Well, I include in my "profile.php" file a "head.php" file which contains two images and three labels(two of them have another image inside).

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 220px;
  left: 20px;
}

.image3 {
  position: absolute;
  top: 340px;
  left: 140px;
}

.image4 {
  position: absolute;
  top: 360px;
  left: 1020px;
}

.nameText {
  position: absolute;
  top: 320px;
  left: 200px;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

.imgedit {
  max-width: 100%;
  max-height: 100%;
  height: 75px;
  width: 75px;
}

.myimg:hover+.mylabel {
  display: block;
}

<div class="parent">
  <input id="file-upload" type="file" />

  <img class="image1 myimg" src="imagesomething1.png" style="width:1050px; height:390px;">
  <img class="image2 myimg" src="imagesomething2.png" style="width:150px; height:150px;">

  <label style="display: none;" for="file-upload" class="custom-file-upload image3 mylabel"><img class="imgedit" src="imagesomething3.png"></label>
  <label style="display: none;" for="file-upload" class="custom-file-upload image4 mylabel"><img class="imgedit" src="imagesomething4.png"></label>

  <label class="nameText">...(text)...</label>

</div>

This is all my code. The promblem now is when I put the cursor above the images the labels are still invisible. Why? How I can fix it?

(P.S. Because I use the same style for both images if my code works then when I put the cursor above to one image both of the labels will be shown, don't take care of that)

because you have used an inline style to hide it - please read up on css specificity, the only thing that beats and inline style is a dirty `!important` hack. Move your inline styles into the stylesheet and it will work as you want — Pete, Jun 15 '18 at 14:07
read all the asnwer in the dup to understand specifity of each selector — Temani Afif, Jun 15 '18 at 14:14

Takit Isy · Accepted Answer · 2018-06-15T14:24:52.657

You're facing the following issues:

In CSS, + is the adjacent sibling selector.
But, in your HTML, the label isn't the element right after the .myimg.
You're using inline styles that overrides the CSS.

Solutions:

Reorganize your elements,
No more inline styles, CSS stays in CSS.

Here is a simplified snippet out of your code, just to show you the principle:

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 220px;
  left: 0;
}

.image3 {
  position: absolute;
  top: 0;
  left: 200px;
}

.image4 {
  position: absolute;
  top: 220px;
  left: 200px;
}

.imgedit {
  max-width: 100%;
  max-height: 100%;
  height: 75px;
  width: 75px;
}

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

.mylabel {
  display: none;
}

.myimg:hover+.mylabel {
  display: block;
}

<div class="parent">

  <img class="image1 myimg" src="https://placekitten.com/150/150">
  <label for="file-upload" class="custom-file-upload image3 mylabel"><img class="imgedit" src="https://placekitten.com/75/75"></label>

  <img class="image2 myimg" src="https://placekitten.com/150/150">
  <label for="file-upload" class="custom-file-upload image4 mylabel"><img class="imgedit" src="https://placekitten.com/75/75"></label>

</div>

Hope it helps.

image:hover is not working

1 Answers1