Anchors Take Hover Effect When Only the User's Mouse is Level with the Element

Hello everyone,

My question is why are my links taking on a hover effect when the visitor’s mouse is just on the same line as the link? I know this has to do with a list-item being a block-level element, but I want the hover effects to only happen when the user’s mouse is directly on top of the anchor text.

My site - Atlanta Review

You have made the hover effect happen when the list is hovered rather than when the anchor is hovered. Only the anchor text is the link but you have made the whole line the trigger for the hover.


.sideWindowLinks a:hover, 
.sideWindowLinks li:hover a, 
.sideWindowLinks a:focus, 
.sideWindowLinks li:focus a, 
.sideWindowLinks a:active, 
.sideWindowLinks li:active a {
    color: #CCCC00;
    text-decoration: none;
}

Only target the anchor and not the list on hover.


.sideWindowLinks a:hover, 
.sideWindowLinks a:focus,
.sideWindowLinks a:active {
    color: #CCCC00;
    text-decoration: none;
}

Yes! Awesome! :smiley:

Do you know why the same thing is happening on my child links in the drop down menu?

Well it will be for the same reasons in that you are styling the anchor when the list is hovered. However, I don;t think you want to remove that function in a drop down because the bigger target area is an aid to accessibility because dropdowns are hard to click at the best of times.

If you do want to remove the effect then you will need to look into rules like this where the hover is triggered on the list for the anchor styles.


#pMenu div a:hover, 
/*#pMenu div li:hover a, */
#pMenu div a:focus, 
/*#pMenu div li:focus a,*/ 
#pMenu div a:active 
/*#pMenu div li:active a */{
    background: none;
    border:none;
    color: #00FF00;
    filter: none;
    text-decoration: none;
}
#pMenu div a:hover,
/*#pMenu div li:hover a, */
#pMenu div a:focus, 
/*#pMenu div li:focus a, */
#pMenu div a:active 
/*#pMenu div li:active a*/ {
    background: none;
    border:none;
    color: #00FF00;
    filter: none;
    text-decoration: none;
}

With this as the target:


#bMenu div a:hover, 
/*#bMenu div li:hover a, */
#bMenu div a:focus, 
/*#bMenu div li:focus a,*/ 
#bMenu div a:active 
/*#bMenu div li:active a */{
	color:#0F0;
	background:none;
	filter:none;
	border:none;
	text-decoration:none;
}

the links are not even displaying a hover effect. Does it have to do with the way I targeted and styled my links?


#bMenu li:hover li a, #bMenu li:focus li a, #bMenu li:active li a{
	color:#0C0;
	text-shadow:1px 1px 1px #000;
	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
	text-decoration:underline;
	background:none;
	filter:none;
	border:none;
	font-size:12px;
	display:inline;
}

Thanks for your help, Paul.

Hello everyone,

I’m working on tidying up my drop down menu on my home page. The child links have a problem in that they are highlighted and given a hover effect when the user’s mouse becomes level with the anchor tag on the drop down menu. There is something incorrect with the way I have targeted it in my dropdownmenus.css file.


#bMenu li:hover li a, #bMenu li:focus li a, #bMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#bMenu div a:hover,
/*#bMenu div li:hover a, */
#bMenu div a:focus,
/*#bMenu div li:focus a,*/
#bMenu div a:active
/*#bMenu div li:active a */{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}

You can see what’s happening for yourself at atlantareviewgroup.com

You’ve posted this question before, and Paul answered it. It would be better to complete that thread if you are having trouble.

As Ralph said :slight_smile:

Threads merged:

You need to change these rules:


#pMenu li:hover li a, #pMenu li:focus li a, #pMenu li:active li a{
	color:#0C0;
	text-shadow:1px 1px 1px #000;
	text-decoration:underline;
	background:none;
	filter:none;
	border:none;
	font-size:12px;
	display:inline;
}

To this:


#pMenu li:hover li a{
	color:#0C0!important;
	text-shadow:1px 1px 1px #000;
	/*text-decoration:underline;*/
	background:none;
	filter:none;
	border:none;
	font-size:12px;
	display:inline;
}
#pMenu li:hover li a:hover, 
#pMenu li:hover li a:focus, 
#pMenu li:hover li a:active{
text-decoration:underline;
color:#0f0!important;

}

Oops. I thought that thread was dead, so I started a new one. I’ll not let it happen again.

This change gave me the desired effect. Thank you for sharing your genius, yet again.