Member Avatar for jovypinoy

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

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..

I really appreciate all the replies.

sample1.JPG 5.32 KB sample2.JPG 5.98 KB
Edited by peter_budo because: Keep It Clear - Please use code tags when posting any code
  • 3 Contributors
  • 3 Replies
  • 103 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jovypinoy

Dani AI

Generated

Quick summary and a practical pattern that avoids surprises: the clipped background happened because inline anchors only paint behind the text. pointed at container hover, suggested styling the list item, and tracked a specificity/ordering quirk. A robust, accessible solution is to make each menu link fill its list item (so the whole row is clickable) and style the anchor for hover and keyboard focus rather than relying on the parent alone.

#article-sidebar li > a {
  display: block;
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

#article-sidebar li > a:hover,
#article-sidebar li > a:focus {
  background-color: #005fa3;
  color: #ffffff;
  transition: background-color .12s ease;
}

#article-sidebar li > a:focus {
  box-shadow: 0 0 0 3px rgba(0,95,163,0.18);
  outline: none;
}

Note about pseudo-classes: order matters because rules later in the stylesheet win when specificity is equal. The conventional ordering to avoid conflicts is :link, :visited, :hover, :active (LVHA). Grouping selectors or putting states in an unexpected order can cause hover/active styles to be overridden — inspect computed styles in DevTools to see which rule is applied.

Quick troubleshooting checklist: confirm the anchor is display:block, check padding and box-sizing, look at computed background-color to find the responsible rule, verify no parent element is covering the area, and add :focus styles for keyboard users so hover effects are accessible.

Recommended Answers

All 3 Replies

Member Avatar for kyraa

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 because: Keep It Clear - Please use code tags when posting any code
Member Avatar for simplypixie

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;
}
Member Avatar for jovypinoy

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 TrustyTony because: fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.