I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/
Related
I am trying to add a hovering effect to my button and no matter what I do it does not work... I have checked all inherited elements and see none that may conflict with my new hover declaration.
Can someone please take a look at the picture and tell me what that green line to the left of my hover declaration means?
It appears that this line indicates a style targeting a hover state.
It looks you have inline css which is overriding the styles added through class.
For your case to override the inline css you may try using !important like below:
.nav5link.nodoNavLink:hover{
background-color: white !important;
color: black !important;
}
I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
It's always the little thing that get me unstuck. I'm trying to make a hover on a navigation element effect 3 elements. The background colour, the text colour, and the small arrow below the text.
The background colour is easy enough, but the text colour only changes when you hover over the actual text - not the whole block element (framed by the background colour). Also, I wanted to image swap the little arrow beneath the text as well. Example:
Here is the site:
MACI test website
I've read up on adjacent and sibling selectors - but I can't quite get it to do what i want. It's probably really obvious, but I can't see it at the moment!
Any help would be appreciated :)
Put the coloring on the link instead of the li, and make the link a block element to fill up the li area:
ul.menu a {
display:block;
background-color:#FFFFFF;
}
ul.menu a:hover {
background-color:#AE242A;
color:#FFFFFF;
}
Also, you could put the arrow image as a non-repeating background image for the link, and set a different one for the regular link and the hover link.
Another thought, have you tried:
ul.menu li.nav-links:hover a.nav {
color:#FFFFFF;
}
I have a horizontal navigation bar that when one of the links are selected the link then becomes bold. However, when I click on one, the item to the right of it move position because the font gets larger thus making the width of the list item larger. Is there anyway to avoid this? I would like the text to stay in the same place. Thank you.
Two possible solutions:
Set a width on the a elements and make them inline-block.
a {
width: 100px;
display: inline-block;
}
You just have to make sure the width is wide enough allow the bolded text to show without breaking to two lines.
Second option: use a text shadow to make it look bold.
a.bolded {
text-shadow:0px 0px 1px black;
}
Here's a demo showing both. I have the second one on hover but you can add or remove the class using jQuery's .toggleClass()
There are two important events that you should target, when writing CSS for cases link this.
One is :hover and the other is :active.
They are called "Pseudo classes", and they give you the option to set the style of an element when you mouse-over it (:hover) and when you click on it (:active).
If you set the style of the a tag the same as active and hover (usually only hover is needed), then you should get the same results and the font size will stay the same.
Here's and example:
a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; }
In a single CSS line, you could set all the styles to be the same.
Important note: you could use jquery, but there's no need for it (just saw you were using it on jsfiddle).
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless