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

Adam Akers
Adam Akers
7,357 Points
Posted by Adam Akers
Adam Akers
7,357 Points

can I not use :hover with classes or can we not assign classes to links??

So I am trying to create something where the entire div is a link. I've read that now with html5 the way to do this is just by simply putting a <div> tag inside of your <a> tags.

In my page I am building, and my codepen, that is exactly what I did. I have the link, with a class then a div inside. But when I try to target the link with its assigned class, it wont respond, but the div does.

It's probably some dumb rookie error, but it's driving me nuts.

Any help here is much appreciated!

Link to my codepen below

http://codepen.io/MrAdam/pen/RNvqvE

Thanks!

edit: I think I have discovered why. The div is sitting on top of the link, therefore hiding any :hover background color changes.

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Your div is positioned ontop of your link so changing the style of the link will not change the background of the div positioned ontop of the link,

An easy solution to this would be to use

.article-link:hover .article-one {
    background-color: #2980b9;
}

What this does is when you hover over .article-link it will change the style of .article-one rather then itself.

I have updated your codepen to show the changes: http://codepen.io/anon/pen/XJOGQa