CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Westzone Solution
Westzone Solution

Reputation: 61

Display an element when hover on another

I want to display the element #b when the user hovers on #a. On page load #b will be set to display: none.

<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div> 
</div>   

#b { display: none; }
#a:hover #b { display: block; } /* Not Working */
#a:hover > #b { display: block; } /* Not Working */
#a:hover + #b { display: block; } /* Not Working */
#a:hover ~ #b { display: block; } /* Not Working */

I have tried many methods but none worked. This is a very simple thing, and it's not happening. Please help.

Upvotes: 1

Views: 1284

Answers (5)

Rob Axelsen
Rob Axelsen

Reputation: 1024

Want to show id element of a div B when Hover on id element of div A [..] I have tried many methods on the internet but none worked. This is a very simple thing, and its not happening. Please help.

Here is a vanilla JavaScript example. Hope this helps.

Example:

var divA = document.getElementById('a');
var divB = document.getElementById('b');

divA.addEventListener("mouseenter", function(event) {
    divB.style.display = 'block';
});

Made a CodePen demo for you, adapted to your html example. Complete with a unicorn, a cat, and rainbows.

CodePen Demo (unicorn inside):

http://codepen.io/robee/pen/EWKZjz

Upvotes: 0

Mobius
Mobius

Reputation: 2896

You can do it, but only on the hover of the container of #a, because it has to be a sibling of the container of #b.

here I have moved the id="a" up to the same level as the container of #b, and then the selector is as simple as #a:hover + div #b.

#b {
  display: none;
}

#a:hover + div #b {
  display: block;
}
<div id="a">
  <ul>
    <li>Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div> 
</div>

Upvotes: 1

user1496463
user1496463

Reputation: 410

With your current HTML this is going to be the only way.

document.querySelector("#a").addEventListener("mouseover", function() {
  document.querySelector("#b").classList.add("show");
});

document.querySelector("#a").addEventListener("mouseout", function() {
  document.querySelector("#b").classList.remove("show");
});
#b {
  display: none;
}

#b.show {
  display: block;
}
<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="http://wallpaper-gallery.net/images/image/image-13.jpg">
  </div>
</div>

If you don't mind changing your HTML, you could go for something like

li span+img {
  display: none;
}

li span:hover+img {
  display: block;
}
<div>
  <ul>
    <li>
      <span>Hover</span>
      <img src="http://wallpaper-gallery.net/images/image/image-13.jpg">
    </li>
  </ul>
</div>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

Toggle a class that shows the hidden element on the mouseover and mouseout events.

var a = document.getElementById('a'),
    b = document.getElementById('b');

a.addEventListener('mouseover',function() {
  b.classList.add('show');
});

a.addEventListener('mouseout',function() {
  b.classList.remove('show');
});
#b {
  display: none;
}
#b.show {
  display: block;
}
<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

Unfortunately you cannot achieve what you require in CSS alone as the HTML structure is too convoluted. The #b element would need to be a sibling or child of the #a element.

If you cannot amend the HTML you would need to use JS instead:

$('#a').hover(function() {
  $('#b').toggle();
});
#b { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li id="a">Suite</li>
  </ul>
</div>
<div>
  <div>
    <img id="b" src="img/image.png">
  </div>
</div>

Upvotes: 4

Related Questions