I have some css I am working with, some links to be exact that have some :before on them for some aditional styling, I want the before to change background color when I hover on the .
Here's my poor attempt at it:
nav > li > a:hover a:before {
background-color: #fff
}
I just want to change the background color of the a:before when i hover over the a.
Thanks!!
Try joining them together like this:
nav > li > a:hover:before {
background-color: #fff;
}
This may also work for you.
nav > li > a:hover::before { background-color: #fff; }
Related
On this dev site, if you hover of "BRANDS" in main menu, it brings up a dropdown. Hover over any of them and the background blinks red and then goes away.
I added background CSS to the "li" and "a" elements of the main menu like this...
.mega-dropdown-inner ul.level1 li.open:hover{
background: red !important;
}
.mega-dropdown-inner ul.level1 li a:hover{
background: red;
}
NOTE: I don't think I even need the "a" styling, but just tried it in case it helps.
Any idea why the background color won't stay the whole time you are hovering?
Because of this rule
.t3-megamenu .mega-nav > li a:hover, .t3-megamenu .dropdown-menu .mega-nav > li a:hover, .t3-megamenu .mega-nav > li a:focus, .t3-megamenu .dropdown-menu .mega-nav > li a:focus {
background-color: #002d5c !important;
}
in your custom.css line 1031.
It is overriding your rule
Hello I am trying to change the background image of my navigation buttons when I hover over it. When I hover over it at the moment it goes from orange to a light grey colour and the text stays white. I would like it to go to a white background colour #ffffff and text to be #F6861F
I have attached my template.css file below
I am using the protostar template. Please help me find where I need to change.
My website is,
The CSS code your looking for is on line 2843-2847
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
The new CSS you will need is as follows:
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #fff;
color: #F6861F;
}
Make those changes and you should bet all set.
Here is my Codepen demo which I want to show like image snap below the link:
Codepen Demo
Snap:
I used this css:
.menu > ul > li:first-child {
color: red !important;
}
To make left most link Red but still it shows Grey line.
Actually it should look like this:
Problem 2:
The length of the line above alert box should span to entire width of the page. How to do this?
I tried with chaging:
.menu > ul {
display: block;
list-style: none;
border-bottom: 0.1em solid #9e9e9e;
width: 152%; // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
margin-left: -2%;
}
Try this
.menu > ul > li:first-child a {
color: red !important;
}
DEMO
Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as
a {
// properties..
}
Change the code to this:
.menu > ul > li:first-child a {
color: red !important;
}
Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)
You forgot to add anchor selector at the end of:
.menu > ul > li:first-child a {
color: red !important;
}
I have a multi-level menu look like
I want my menu
Has the same background (#5b740d as you see)
Has the same active background (red as you see)
Has the same hover background (red as you see)
And three above option will for all menu and sub-menu
But my code look like complex. Here is my example code for hover
/* hover: can using a simple selector to make all are same background */
.menu li:hover {
background: red;
}
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
I get the css on internet but it's complex then i change it by my way (But it still complex :( plz help me make it simple ).
But i get bug: when i hover item (2) like in my picture bellow then item (3) was hover?
plz simplified my css code to do three option above (i don't understand complex code :( ) and help me fix my bug thank.
Here is my code http://jsfiddle.net/SWF6w/
There's no way to make this more 'simple', there is very little superfluous markup or definitions in that code, so I don't really understand your appeal to make it more simple.
You can easily fix the red hover on child elements by specifying a direct descendent selector on your li:hover a selector, though. For example:
.menu li ul li:hover > a {
background: red;
}
Will produce this result > http://jsfiddle.net/SWF6w/1/
Replace this piece of code :
.menu li li ul li a:hover {
background: red;
}
.menu li ul li:hover a {
background: red;
}
With this one:
.menu li li ul li>a:hover {
background: red;
}
.menu li ul li:hover>a {
background: red;
}
Here is updated jsFiddle: http://jsfiddle.net/SWF6w/2/
I am creating a dropdown menu for a Wordpress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don't seem to work in my case.
I think the solution must be:
parent:hover child { ... }
and it works for example here.
I tried to do the same with my code (please see last CSS selector) but it doesn't work here.
Update your CSS from:
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
To
#menu ul li:hover a {
background-color: #006699;
}
#menu ul li a:hover {
color: #FFFFFF;
}
Updated example on jsFiddle.
You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:
.menu ul li:hover > a {
background-color: #006699;
color: #fff !important;
}