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

Html – Only one span element takes CSS rules

Not sure if I’m tired or what. Trying to make setup where there are multiple elements with span class which when hovered upon will make appear some text in a Div. Any tips on how to make this work and maybe even make it more compact. Thanks.

.hide {
    display: none;
 
  min-height: 200px;
}

.hide2 {
    display: none;
  border: solid #ff8900 2px;
  border-radius: 20px;
  padding: 20px;
  min-height: 200px;
}
    
.myLINK:hover + .hide {
  display: block;
  color: gray;
}

.myLINK2:hover + .hide2 {
  display: block;
  color: gray;
}
<h2>Display an Element on Hover</h2>

<span class="myLINK">Hover over me 1.</span> | <span class="myLINK">Hover over me 2.</span> 
<div class="hide">I am shown when someone hovers over the div above.</div>
<div class="hide2">I am shown when someone hovers over the div above2.</div>

Need to show text in a div when hovering on top of span/class element.

Tags:

3

Answers


  1. 0

    References :

    https://www.w3schools.com/cssref/sel_gen_sibling.php
    https://www.w3schools.com/cssref/sel_element_pluss.php

    You need to use ~ selector.

    NOTE: You forgot to change second span tag class name.

    .hide {
  display: none;
  min-height: 200px;
}

.hide2 {
  display: none;
  border: solid #ff8900 2px;
  border-radius: 20px;
  padding: 20px;
  min-height: 200px;
}

.myLINK:hover ~ div.hide {
  display: block;
  color: gray;
}

.myLINK2:hover ~ div.hide2 {
  display: block;
  color: gray;
}
    <h2>Display an Element on Hover</h2>

<span class="myLINK">Hover over me 1.</span> | <span class="myLINK2">Hover over me 2.</span>
<div class="hide">I am shown when someone hovers over the div above.</div>
<div class="hide2">I am shown when someone hovers over the div above2.</div>
    Login or Signup to reply.
  2. 0

    You have used + in CSS, which is used for sibling elements.

    The correct approach is following, I also have updated class names for ease of understanding:

    .hiddenElementOne {
  display: none;
  min-height: 200px;
}

.hiddenElementTwo {
  display: none;
  min-height: 200px;
  border: solid #ff8900 2px;
  border-radius: 20px;
  padding: 20px;
}

.firstHover:hover~ .hiddenElementOne {
  display: block;
  color: gray;
}

.secondHover:hover~ .hiddenElementTwo {
  display: block;
  color: gray;
}
    <!DOCTYPE html>
<html>
  <head>
    <title>Hover Effect</title>
  </head>
  <body>
    <h2>Display an Element on Hover</h2>

    <span class="firstHover">Hover over me 1.</span> |
    <span class="secondHover">Hover over me 2.</span>
    <div class="hiddenElementOne">I am shown when someone hovers over the div above.</div>
    <div class="hiddenElementTwo">I am shown when someone hovers over the div above2.</div>
  </body>
</html>
    Login or Signup to reply.
  3. 0

    You don’t need to repeat the code for each hidden div, just wrap components under single div and apply the CSS

    .container {
   display: flex;
   gap: 1rem;
}

.myLink{
  position: relative;
}

.hide {
  display: none;
  min-height: 200px;
  position: absolute;
}

    
.myLINK:hover + .hide {
  display: block;
  color: gray;
}
    <h2>Display an Element on Hover</h2>

<section class='container'>
  <div>
    <span class="myLINK">Hover over me 1.</span>
    <div class="hide">
      I am shown when someone hovers over the div above.
    </div>
  </div>

  <div>
    <span class="myLINK">Hover over me 2.</span> 
    <div class="hide">
      I am shown when someone hovers over the div above2.  
    </div>
  </div>
  
  <div>
    <span class="myLINK">Hover over me 3.</span> 
    <div class="hide">
      I am shown when someone hovers over the div above3.  
    </div>
  </div>
  
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search