I need some CSS help?

Question

• hyperlink 1
  
  
• hyperlink 2
  .....
  
  ...........
  • hyperlink 2.1
  
  ...........
  • hyperlink 2.2
  
  .....
  
  

Ok, so I have this ul list in my html file. I style it, and everything was good. But then, on a tutorial, they said to write on the CSS file:


ul#navmenu li:hover > a{
background-color: #CFC;
}


I understood if it were like: "a:hover{..." That would modify the color of the block whenever I hovered on it. But what's the difference between that, and what he wrote?

Answer 1

"ul#navmenu li:hover" is a pseudo ID. Classes are usually used:



Pseudo Classes



You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.



You can do this in the following fashion:



#pseudo_content a:link {color: #090;}

#pseudo_content a:visited {color: #999;}

#pseudo_content a:hover {color: #333;}

#pseudo_content a:focus {color: #333;}

#pseudo_content a:active {color: #090;}



Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.



Then for the links in a column you could use the following:



#pseudo_column a:link {color: #090;}

#pseudo_column a:visited {color: #999;}

#pseudo_column a:hover {color: #333;}

#pseudo_column a:focus {color: #333;}

#pseudo_column a:active {color: #090;}



Once again, this assumes the name of the column division, just change the name to match yours.



This same method can be accomplished by declaring a class instead of an id.



a.pseudo_column:link {color: #090;}

a.pseudo_column:visited {color: #999;}

a.pseudo_column:hover {color: #333;}

a.pseudo_column:focus {color: #333;}

a.pseudo_column:active {color: #090;}



Though in this case you will need to add a class to each link



some link text



But, there is still yet an easier way



.pseudo_column a:link {color: #090;}

.pseudo_column a:visited {color: #999;}

.pseudo_column a:hover {color: #333;}

.pseudo_column a:focus {color: #333;}

.pseudo_column a:active {color: #090;}



Then in the (X)HTML file

Link Text Description

Ron

Answer 2

The CSS rule states that whenever you hover over a

inside #navmenu, change the

's background color to light green.



You can make hover rules for any element, it doesn't have to be a .

Depending on the other rules, I guess the link doesn't fill the entire space of

, so using a:hover to change the background would only highlight a part of it.

Answer 3

a:hover targets all the anchor tags on the page, meaning when you hover on a link, its background color will change.



For example, if you hover over hyperlink 1, it will have a different background color.

If you hover over hyperlink 2, it will have a different background color.

If you hover over hyperlink 2.1, it will have a different background color.

Everything except the anchor tag you're hovering over will have its default background color.



What he write specifically targets the child anchor tags inside a

tag, and specifically only when you're hovering on that

. So, with this:



If you hover over hyperlink 1, it will have a different background color.

If you hover over hyperlink 2, it will have a different background color.

If you hover over hyperlink 2.1, it AND hyperlink 2 will have a different background color.

This is because if you hover over hyperlink 2.1, your mouse is also hovering over the

block for hyperlink 2.

Answer 4

If I understand you correctly...



What the example shows is when hovering over a sub menu link the parent menu link is also highlighted. So hovering over hyperlink 2.2 is also highlighting the parent hyperlink 2.



Styling the a links would highlight each individual link as you hovered over it.

Answer 5

Good ad best way to proceed would be install Firebug on your frefox and open the html file in firefox , open firebug addon and click hover blue icon on your left side of the panel and u can change the settings dynamically and see how it reacts to your input changes.