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

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

How do you make a link hover?

I can make my link hover? <a href e,t,c >

and then in the css I have a:hover e.t.c and so on.

However, when I try to make my other link hover, it won't hover! My other link is inside a div. The div around it even has an ID. IS there anyway to fix this? I did a test, my test link will hover but my other link inside a div won't hover? Is there a special code I need to write?

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

Can you post some example code? I'm not exactly sure what it is you're trying to accomplish.. From what I gathered, are you trying to make one link have a different effect fro another link when they're hovered?

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

Can you post some example code? I'm not exactly sure what it is you're trying to accomplish.. From what I gathered, are you trying to make one link have a different effect fro another link when they're hovered?

12 Answers

daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

If you don't need the unordered list, you can just take it out...I just added it to show that you have to be specific depending on what you are targeting. This is just a link that will also turn red when hovered.

<div id="profile">
 <a href="#">Text will change to red when hovered</a>
</div>

#profile a:hover {
  color: red;
}
syed hussain
syed hussain
193 Points
syed hussain
syed hussain
193 Points

<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} </style>

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

In it's most basic form a style like a:hover {text-decoration: none} a pseudo class with make any link hover.

If you want to make any number of divs hover you should use a class like this. a.thisismyclass {text-decoration: none;}

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

a:hover applies to any link when the mouse is hovered over it. The link being within a <div>, <p> or whatever does not matter. It's likely you made a mistake somewhere in your HTML. Maybe not closing a tag, or something. Also, make sure you're hovering over the tag to see a change.

daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

Please post the html and the css referencing the link to help best.

I think it may be an issue with specificity, so try being very specific which link you want to be hovering. Assuming you have an id named some-id inside the div, and inside the div you have an unordered list and you want the link inside the list items...try something like this:

#some-id li a:hover {
  color: red;
}
daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

The HTML for that CSS would be something like this:

<div>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>
daniela
daniela
2,629 Points
daniela
daniela
2,629 Points 
<div id="some-id">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>
daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

This is the corrected HTML with the id added to the div.

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

This is the div

<div id="profile"> <a href="Profile.html">Profile</a> </div>

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

<div id="profile"> <a href="Profile.html">Profile</a> </div>

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

THEDIV<div id="profile"> <a href="Profile.html"></a> </div>

Fedor Andreev
Fedor Andreev
6,438 Points
Fedor Andreev
Fedor Andreev
6,438 Points

It wont post for some reason. I'll describe my div. You have a div with an id="profile. inside the div you have an anchor (a) with href. I want to make the div hover when you put your mouse over it. Basically, imagine a button with a text centered of it and I want to make it hover.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Here's some tips for posting code

https://teamtreehouse.com/forum/how-to-type-code-in-the-forum

daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

This should work for what you mean. You can set the hover to have any action you want from this, but I set it to be red when hovered. 

<div id="profile">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>

#profile li a:hover {
  color: red;
}
Christophe Rudyj
seal-mask
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points
Christophe Rudyj
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points 
<div id="profile"><a href="#">Link</a></div>

#profile {display:inline-block;height:100px; width:50px; ...}
#profile a:hover {position: relative; top:20px;}