Unhide element when hovered over element

Question

Need little CSS help! I want to unhide a elements when another element is hovered.

For example:

<div class="Welcome"><a>Welcome to our site<a><div>
<div class="Message">Thanks for touching me!<div>

CSS

.Message {
    display: hidden
}

.Welcome a: hover {
/*I want to make .Message visible now. Any ideas?*/
}

[This](http://stackoverflow.com/questions/9535105/controlling-css-based-hover-effects) might help. Yes, `.js` would be easiest and more functional. — ChiefTwoPencils, Jul 29 '12 at 02:30

score 6 · Accepted Answer · answered Jul 29 '12 at 02:32

6

This is really the best you can get, when you hover over .Welcome .Message is displayed. This uses the adjacent sibling + selector.

.Message {
    display: none;
}

.Welcome:hover + .Message {
    display:block;
}

http://jsfiddle.net/mowglisanu/ZPVSU/

answered Jul 29 '12 at 02:32

Musa

96,336
17
118
137

how is this as far as cross browser support? – Jared Jul 29 '12 at 02:33
According to [mdn](https://developer.mozilla.org/en/CSS/Adjacent_sibling_selectors) chrome, ff, opera, safari, IE7+ – Musa Jul 29 '12 at 02:38
Thanks, I found this for an additional ref... http://reference.sitepoint.com/css/adjacentsiblingselector although the browsers listed seem rather dated. – Jared Jul 29 '12 at 02:39
Hey, thisn't working. To get a better idea, i'm trying to do it with my site's featured area. Link: http://www.thetechnodaily.com .recentpost-1 img:hover + .content-heading { display:block; } .content-heading { display: none; } – Lavanya Arora Jul 29 '12 at 02:47
@LavanyaArora use this `.recentpost-1 a:hover + .content-heading { display:block; } .content-heading { display: none; }` instead since `.content-heading` adjacent sibling is the `a`. – Musa Jul 29 '12 at 02:59
@LavanyaArora try refreshing your browser, cause I can see it working – Musa Jul 29 '12 at 03:17
Guys, do you know how to slow down this animation while opacity is changing? – Lavanya Arora Jul 29 '12 at 03:58
@LavanyaArora what animation? Also you might want ask that in new question. Also if an answer solves your problem you should accept it as the answer by clicking on the tick next to it – Musa Jul 29 '12 at 04:18

Jason Gennaro · Answer 2 · 2012-07-29T03:17:17.627

This is really easy with a bit of jQuery.

CSS

div.Message{
    display:none;
}

HTML

<div class="Welcome">Welcome to our site<div>
<div class="Message">Thanks for touching me!<div>

jQuery

$('.Welcome').hover(
    function () {
    $('.Message').show();
  }, 
    function () {
    $('.Message').hide();
  }
);

Example: http://jsfiddle.net/gxn34/

EDIT

To answer your question below

You would need to add the following to your page, usually in the <head> section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And

 <script>
     $(document).ready(function(){
        $('.Welcome').hover(
            function () {
        $('.Message').show();
          }, 
            function () {
        $('.Message').hide();
          }
        );
     });
 </script>

Where do I insert this jQuery? – Lavanya Arora Jul 29 '12 at 02:48 — Lavanya Arora, Jul 29 '12 at 02:48
I also recommend jquery for this. – Ryan Griggs Jul 29 '12 at 03:25 — Ryan Griggs, Jul 29 '12 at 03:25

score 0 · Answer 3 · answered Jul 29 '12 at 02:31

0

.Welcome a: hover {
  display: block;
}

answered Jul 29 '12 at 02:31

Zombo

1
62
391
407

Unhide element when hovered over element

3 Answers3