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?*/
}

Answer 1

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/