Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Peaches Stubbs
Peaches Stubbs
21,320 Points

I want to hide and show an element using css.

Hi everybody I want to hide an element using display:none; . I then want this element to show when I hover over a different element. I want to accomplish this using CSS. Any suggestions would be greatly appreciated, also if I find a solution that works I will post it here as well. Thank you in advance.

5 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Your problem is CSS specificity. You used the most specific selector, the id selector to set display: none. You than used a fairly generic selector, the div selector to set it to display: block. In this case, with both rules, the id selector is going to win every time.

The you're going to have to make the rule that makes it display block as specific as the rule that hides it. The easy way is to change your rule to ul li a:hover + #tryit. If you are going to have multiple divs on a page to hover and show, I'd suggesest movig the #tryit id to a class.

Here is a friendly article to read on it https://css-tricks.com/specifics-on-css-specificity/

kheiferfuller
kheiferfuller
8,635 Points
kheiferfuller
kheiferfuller
8,635 Points

This is the easiest way I can think of using strictly css

div {
    display: none;
}

a:hover + div {
    display: block;
}
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

This works, as long as the element being hidden comes immediately after the trigger element in the html. This selector type is called an adjacent sibling combinator.

https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Thank you I will try this and let you know how it goes.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Hi everyone I am still playing with this to try to get it to work. What i have done is added a div directly under a list item to try to use the :hover pseudo class to display it. The div is set to display: none; I will paste my code below:

<ul>
<li><a href="#">Home</a>
  <div id="tryit"></div>
</li>
</ul>

Here is my CSS:

 ul li a {
    padding: 0px;
    margin-top: 0px;
}
 ul li a:hover + div{
    display: block;

}

It is not working I am sure that I am missing something simple. I will keep looking but if you have any suggestions please let me know.

Peaches Stubbs
Peaches Stubbs
21,320 Points

Full Css

#tryit {
    height: 100px;
    width: 80%;
    border: 3px dotted #C09;
    display: none;
}
 ul li a {
    padding: 0px;
    margin-top: 0px;
}
 ul li a:hover + div{
    display: block;

}
Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Thank you all for your responses, I did get this resolved using Kevin Korte's suggestion (and a youtube video)