3

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;
}
3
  • It's your selector that matters (the +). Check out the CSS selectors documentation to choose the correct selector.
    – user1932079
    Jun 21, 2014 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. Jun 21, 2014 at 19:10
  • Do you want this or what?
    – potashin
    Jun 21, 2014 at 19:11

3 Answers 3

4

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

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

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

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.