CODEWITHSUNDEEP
htmlcsscss-selectorshover
Phumchai Pipatanamongkol
Phumchai Pipatanamongkol

Reputation: 43

CSS: Hover over a link but image is not displayed

In practice, when I hover these links, all of them turn green as the first hover selector get executed fine. However, for the last link "cde", I call another hover selector to display an image, it does not work.

What I have tried:

Question: Is there any way to get an image to appear with the texts turn green?

Thank you so much in advance for your help. Highly appreciate!

 
.work-abcde a:hover{
  color: #61c261;
  }

  .cde-pic{
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
  }

.cde:hover .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}
 
<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
<div class="cde-pic"><img src="./Resources/cde.png" ></div>
</ul>
</div>

Upvotes: 1

Views: 96

Answers (4)

Dalin Huang
Dalin Huang

Reputation: 11342

The problem is css selector can't target parent in pure CSS, you can target sibling or child but not the parent (pure CSS).

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

For more about child/sibling selector you could read more here (2 mins of reading) https://www.w3schools.com/css/css_combinators.asp

Solution 1:

<li> and <div> are sibling. so use li hover instead of class cde, then you can target the cde-pic class:

li:hover ~ .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}


.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
}

li:hover + .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}
<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4><a class="cde" href="www.cde.com" rel="nofollow"> cde </a> </h4>
    </li>
    <div class="cde-pic">
      <img src="https://dummyimage.com/200x200/000/fff">
    </div>
  </ul>
</div>

Solution 2:

Move <div> into <li>, so they become sibling (cde and cde-pic).

.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
}

.cde:hover + .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}
<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4>
        <a class="cde" href="www.cde.com" rel="nofollow"> cde </a>
        <div class="cde-pic">
          <img src="https://dummyimage.com/200x200/000/fff">
        </div>
      </h4>
    </li>
  </ul>
</div>

Upvotes: 3

Johannes
Johannes

Reputation: 67738

This selector which you use...

.cde:hover .cde-pic { ... }

...cannot work, since .cde-pic is not a child element of .cde.

Upvotes: 1

Sank6
Sank6

Reputation: 497

A solution with JS... Here is the code:

function chbg(vis) {
    document.getElementById('cde').style.visibility = vis
}
.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  float: right;
  visibility: hidden;
}

.cde:hover .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

a:hover > .cde-pic {
  visibility: visible;
}
<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')"  class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')" class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')" class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4>
    </li>
    <div class="cde-pic" id="cde"><img src="http://lorempixel.com/200/200/"></div>
  </ul>
</div>

Hope it helps!

Upvotes: 0

Jose Fuentes
Jose Fuentes

Reputation: 69

Try the following:

.work-abcde a:hover{
  color: #61c261;
  }

  .cde-pic{
  position: relative;
  top: -100px;
  float: right;
  display:none;
  }

.cde:hover:after {
  content: url("//images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"); /* no need for qoutes */
   position: relative;
  display:block;
  left: -20px;
}
<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
</ul>
</div>

Upvotes: 0

Related Questions