How To Change Text Box Content On Hover

I am having trouble trying to figure out how I can make a text box change content depending on what link is being hovered over. I can get it to work with which ever one is closest

Solution 1:

You need the follwing HTML mark-up:

<ahref="#"class="a-1">one</a><ahref="#"class="a-2">two</a><ahref="#"class="a-3">three</a><divclass="element-1">hello one</div><divclass="element-2">hello two</div><divclass="element-3">hello three</div>

and then apply the following CSS:

.element-1, .element-2, .element-3{
     display: none;
}
.a-1:hover  ~ .element-1 {
     display: block;
}
.a-2:hover  ~ .element-2{
     display: block;
}
.a-3:hover  ~ .element-3 {
     display: block;
}

See demo: http://jsfiddle.net/audetwebdesign/p7WUu/

The CSS is slightly repetitive but it works and no JavaScript required.

The sibling combinator (~) is needed to pick out sibling elements, see reference.

Reference: http://www.w3.org/TR/selectors/#sibling-combinators

Solution 2:

<div class="element special">hello</div> Use ~ instead of +

a:hover ~ .element.special { display: block; }

~ sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (X + Y) will only select the first element that is immediately preceded by the former selector, ~ is more generalized.

Solution 3:

Read more about the content property here: http://www.w3schools.com/CSSref/pr_gen_content.asp As i read it, you can not use it with hover. It also only manipulates content of the current htmlelement.

With jQuery you can solve this. See http://jsfiddle.net/fhD3A/

$("a").hover(function() { $('.element').html('art'); });