How To Change Text Box Content On Hover

Question

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 to the div but the other links seem to have no effect. I do not however want to have text being inserted in between the links nor do I want to create several text boxes. My main goal is to have the links always in the same place and when you hover over them a text box underneath will display the correct content.

Here is some code and a JSFiddle I threw together to help better illustrate my question: JSFiddle

HTML:

<a class="one" href="#">one</a>
<a class="two" href="#">two</a>
<a class="three" href="#">three</a>

<div class="element">hello</div>

CSS:

.element {
     display: none;
}

a:hover + .element {
     display: block;
}

It's your selector that matters (the `+`). Check out the [CSS selectors](http://www.w3.org/TR/CSS2/selector.html#pattern-matching) documentation to choose the correct selector. — , Jun 21 '14 at 19:08
What is “the correct content” that should be shown? This is an underspecified problem. It also looks like an attempt at doing in CSS something that cannot in general be done in CSS and would be rather simple in JavaScript. — Jukka K. Korpela, Jun 21 '14 at 19:10

Marc Audet · Accepted Answer · 2014-06-21T19:25:00.553

You need the follwing HTML mark-up:

<a href="#" class="a-1">one</a>
<a href="#"class="a-2">two</a>
<a href="#"class="a-3">three</a>

<div class="element-1">hello one</div>
<div class="element-2">hello two</div>
<div class="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

eldos · Answer 2 · 2014-06-21T19:20:24.380

1

<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.

edited Jun 21 '14 at 19:20

answered Jun 21 '14 at 19:14

eldos

3,132
3
29
32

In this example, any of the links will open all the sibling `.element` elements, not what the OP wanted. – Marc Audet Jun 21 '14 at 19:16
@MarcAudet simply you can use more specific selector like I mentioned – eldos Jun 21 '14 at 19:25

score 0 · Answer 3 · answered Jun 21 '14 at 19:11

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'); });

How To Change Text Box Content On Hover

3 Answers3

Linked