Question 42791 in Html Question posted in
Some basic documentation can be found here.

HTML CSS Hover over class –> action in other class

This code is reacting on the hover of line 1 (gives red 3rd line)
and is also reacting on the hover of the photo (gives new photo).

I want if you hover over the first line, that also the photo is hovered (and the 3rd red line).
So, hover over ‘hover over me’ should give a red line + a new photo.

Actual code is

.sibling-hover,
#parent {
  cursor: pointer;
}

.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}

.kid {
  position: relative;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 70px;
  text-align: center;
}

.kid img {
  display: block;
  opacity: 1;
  height: auto;
  transition: .6s ease;
  width: 10%;
  position: absolute;
  z-index: 12;
}

.kid img:hover {
  opacity: 0;
}

.kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}
<div>
  <div class="sibling-hover">hover over me</div>
  <div>I do nothing</div>
  <div>I do nothing</div>
  <div class="sibling-highlight">I get highlighted</div>
  <div class="sibling-highlight">
    <div class="kid"><img src="https://www.westville.be/media/p4ra1gja/205extgb2boldcam-b6.jpg" /><img src="https://www.westville.be/media/r1gd3rrd/205extgb2boldcam-a3.jpg" /></div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Why dont you just not "expand" your selectors that you already wrote.

    .sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}

.sibling-hover:hover~.sibling-highlight .kid img:hover {
  opacity: 0;
}

 .sibling-hover:hover~.sibling-highlight .kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}
    Login or Signup to reply.
  2. 0

    You can do it like so:

    .sibling-hover:hover~.sibling-highlight>.kid>img:first-child {
      opacity: 0
    }

    By selecting the first img in with .sibling-highlight class logic you already had

    .sibling-hover,
#parent {
  cursor: pointer;
}

.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}
/* ADDED HERE */
.sibling-hover:hover~.sibling-highlight>.kid>img:first-child {
  opacity: 0;
}

.kid {
  position: relative;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 70px;
  text-align: center;
}

.kid img {
  display: block;
  opacity: 1;
  height: auto;
  transition: .6s ease;
  width: 10%;
  position: absolute;
  z-index: 12;
}

.kid img:hover {
  opacity: 0;
}

.kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}
    <div>
  <div class="sibling-hover">hover over me</div>
  <div>I do nothing</div>
  <div>I do nothing</div>
  <div class="sibling-highlight">I get highlighted</div>
  <div class="sibling-highlight">
    <div class="kid"><img src="https://www.westville.be/media/p4ra1gja/205extgb2boldcam-b6.jpg" /><img src="https://www.westville.be/media/r1gd3rrd/205extgb2boldcam-a3.jpg" /></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search