0

Hi guys, This is what I wanted to do.

1. When I hover my mouse on the sidemenu. It will change it background color.

Here is my codes.

#main-sidebar {
	width: 185px;
	float: left;
	padding-right: 10px;
	
	
}
#article-sidebar {
	color: #0b73b7;
	font-size: 14px;
	font-weight: bold;
}
#article-sidebar li {
	padding-bottom: 15px;
}
#article-sidebar li ul {
	padding: 5px 0px 0px 0px;
}
#article-sidebar li ul li {
	padding: 7px 0px 0px 15px;
}
#article-sidebar a:link,
#article-sidebar a:visited,
#article-sidebar a:hover,
#article-sidebar a:active {
	text-decoration: none;
}

This is what it looks like http://www.daniweb.com/forums/attachment.php?attachmentid=23005&stc=1&d=1322016962

But when I try to edit this one.

#article-sidebar a:link,
#article-sidebar a:visited,
#article-sidebar a:hover{
        background-color: black;
}
#article-sidebar a:active {
	text-decoration: none;
}

It looks like this.. http://www.daniweb.com/forums/attachment.php?attachmentid=23006&stc=1&d=1322017134

I really appreciate all the replies.

Edited by peter_budo: Keep It Clear - Please use code tags when posting any code

Attachments sample1.JPG 5.32 KB sample2.JPG 5.98 KB
3
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by jovypinoy
0

i am a beginner.. but from what i know a means anchor, if what you want to hover is not an anchor and the id is article-sidebar then the css should be like this:

#article-sidebar:hover{
       background-color: black
}

hope its help..

Edited by peter_budo: Keep It Clear - Please use code tags when posting any code

0

I presume your problem is that the black background is only applied to the links whereas you want some padding between your link text and the edge of the black background. If this is the case then as you are only applying your black background to the link then what you have is correct, you need to apply the background to the containing element as well, in the case your li.

#article-sidebar li:hover, #article-sidebar li ul li:hover {
	background-color: black;
}
0

Hi Sorry for the delay.. This was actually solved but from the other site. My only mistake from my original post was I placed hover first before the active.. It should be the active before the hover..

Here is my new codes.

#article-sidebar a,
#article-sidebar a:link,
#article-sidebar a:active {
    text-decoration: none;
}
#article-sidebar a:visited{
background-color: #f5f5f5;
color: #0b73b7;
}

#article-sidebar a:hover{
background-color: black;
color: #fff;
}

Thanks for the reply guys.. Daniweb rocks!

Edited by pyTony: fixed formatting

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.