I'll try to explain this as best I can - I'm playing with a CSS vertical menu, take a look at it here:
http://codepen.io/jgclifton/pen/JIfhy
My question is, how do I ensure that the links keep their hover color when navigating to the submenu of that item.
I hope that makes sense, I tried using a:active but it seemed to have no effect.
Set the color on the hover state of the li:
.menu-side-menu-container li:hover > a
{
#FFFFFF;
}
Live Demo: http://jsfiddle.net/xxf9B/1
Related
Might be a small thing, but I am struggling to find out how the hover selector works logically in dropdown menus.
Here's the entire code in question: https://jsfiddle.net/5dcd9zLh/
.droplist {
display:none;
}
li:hover > .droplist {
display: block;
}
Here's my understanding of the current code.
Step 1: li is being hovered over
Step 2: Select all child elements .droplist
Step 3: Apply styling display:block to .droplist
Wouldn't that mean the moment I start to hover my cursor from li over to droplist, the styling would revert back to display:none? Why is it that .droplist maintains its display:block property when li is no longer being hovered over?
Because .droplist is child of li tag. Thus, when you hover to .droplist, this still known as you hover on li tag.
The :hover selector can be known is: "When mouse over me or all of my childs"
Hope this will help you understand this!
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
I have this code, please observe this fiddle:
http://jsfiddle.net/VjhJ4/19/
When you hover over the words, the text color changes to white - which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.
How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}
Just add (or amend your existing CSS to include) the following:
#second-menu ul.nav li:hover a {
color: #fff;
}
JS Fiddle demo.
Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here
It wasn't changing the hover effects previously because you'd, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li's border had no effect.
This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).
I'd recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:
#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
color: #fff;
}
The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:
ul.nav li a:hover,
ul.nav li:hover a {
color: #fff;
}
Oh, and it's worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.
If you want the border to be a part of the hyperlink (that is, the user can click on the hyperlink when the mouse is over the border), then you'll need to remove the border from the li and add it to the hyperlink instead. If necessary, add display:inline-block to the hyperlink.
If the border doesn't need to be a part of the hyperlink, then #David Thomas's suggestion should be all you need.
Modified demo
Search for the string
ul#secondary-menu a:hover { color: #FFFFFF;}
in your css style and replace it with
ul#secondary-menu li:hover a{ color: #FFFFFF;}
As you see on default twitter bootstrap navbar menu only the active menu item's background is different then other.
What I want is when I'm on a menu item, I want the background to be changed to another color.
The bottom line, I should act as active one when I'm on hover of the menu item.
How can I do this?
Everyone here is wrong, after some testing you'll find this CSS to change menu hover.
.dropdown-menu li a:hover {background-color:red;}
Enjoy
You have to add an inline style or different id to the li on that particular page and style it to your liking. If you dont have access to that you have to do it using Jquery. Does that answer your question.
In your css:
.navbar .nav > a:hover {background-color:#f60;}
I hope this helps, I'm a little confused as to what you're asking.
Check answer by #martincho- it worked for me in changing the blue hover color:
Don't change bootstrap.css. Create another css file where you can override this. Anyway, the line is 4572:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a
Set background-image to none, and background-color to whatever color you want.
I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!