How do I stop a border being applied twice... once for the active item and once on the hover?
I've tried using .navbar a:not(.active):hover but it doesn't work. I've also tried giving all navbar items a bottom border that is of the required thickness but of the background colour and changing the colour on the hover.
The desired effect is that the active item is in bold and has a white bottom-border, whilst the item the mouse is over also has a white bottom-border (shown in red in the image) but isn't in bold (as both colours will be white I'm not bothered about which one 'wins'). But my problem is when the mouse is over the active item the bottom-border is added twice.
It's most likely due to a border being applied to 2 different elements.
I made you a fiddle to understand the issue.
As you can see all is working correctly because both the .active class and the :hover pseudo class are referred to the ul > li.
ul > li.active{
border-bottom:3px solid red;
}
ul > li:hover{
border-bottom: 3px solid yellow;
}
If you try for example to change the :hover to ul > li > a you see the double border.
ul > li.active{
border-bottom:3px solid red;
}
ul > li > a:hover{
border-bottom: 3px solid yellow; /* double border */
}
Related
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
I have included a jsfiddle to show you an example. I have the navigation ul items set with a white background and the font is a red color. When hovered over I want the two colors to swap, the background to become the red color and the font to become white. Before I put the anchor tags in it worked, but after the font does not change to the white color on hover. If I add this:
nav ul li a:hover{
color:white;
}
the font will change to white, but not when the box is hovered on, but only when the font itself is hovered on, but I want the font to change to white as the list item box is hovered on. Any help? Thanks!
jsfiddle: http://jsfiddle.net/xNZxF/
Add this:
nav ul li:hover a{
color:white;
}
jsFiddle example
To match the easing you may want to also add -webkit-transition: all .5s ease-in-out; to nav ul a.
jsFiddle example
Just add the following to your CSS.
nav ul li:hover > a {
color: white;
}
Also remove color: white; from nav ul li:hover. You where trying to change the text color of the text within the li while it was actually in the a. With nav ul li:hover > a you can change the color of a when the nav ul li is being hovered over. This doesn't give the text a fancy transition to it's hover color, but I think you can figure that out by yourself. Good luck!
Give this a go:
nav ul li:hover a {
color: white;
}
Hi my website is http://eeeonlinecourse.com/
I would like to style my menu bar using border-bottom property as follows:
header#top nav ul li a:hover{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
header#top nav ul li a:active{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I have added these two lines into my child theme's stylesheet. However it does not seem to be working. Right now only the hover property is working fine. I have added an active selector after my hover selector but it is still not showing the bottom-border when the menu link is active. What should I add into my stylesheet?
Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.
header#top nav .sf-menu li.current_page_item > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current_page_item > a
{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).
And, Good Luck..Sorry if this is not the answer.
Looking at your given code and reference site it seems that you have issue with active link only right?
If so than you can simply remove a.active because there is no active class applied to link.
Instead use
header#top nav ul li.current_page_item > a {
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I hope this will solve your problem.
Try giving: current-menu-item is the active menu link.
li.current-menu-item a:active{ border-style: solid;
border-bottom: thick solid #27CCC0; }
Hope this helps.
I'm having a little trouble with background color of my dropdown menu. I changed the color of background color on hover to orange. But, if I go to any submenu in that dropdown, the color of parent item change to default blue. Don't know, how to explain it better, I will just show a picture:
So, as soon as I hover over subitem, the parent background color change to blue. I was trying to do a selector for that but ran out of ideas. Any help please?
I think you need something like this to ensure all CSS selectors are covered...
/* change background color on hover */
.dropdown-submenu > a:focus, .dropdown-submenu > a:hover, .dropdown-submenu:focus>a, r, .dropdown-submenu:hover>a,
.dropdown-menu > li a:hover,
.dropdown-menu > li a:focus { background-color: orange; background-image: none; filter: none; text-decoration: none; border: none; }
Demo: http://bootply.com/75155
Hi I have a little CSS problem with a Superfish menu, when an active menu is hovered the color: #000000 don't apply, both background and color is white. The inactive menu works as I want.
Example:
Menu 1 (active)
- Bla
- Bla
Menu 1 (active & hover)
- Blank
- Bla
pastebin: http://pastebin.com/ziYaZJ3e
.ot-menu li li a:focus, .ot-menu li li a:hover, .ot-menu li li a:active {
background: #FFFFFF;
color: #000000;
border-bottom: none;
outline: 0;
}
.ot-menu .current_page_item li a, .ot-menu li .current_page_item a {
background: black;
border-bottom: none;
color: white !important;
}
The color set here is the reason you are getting white on white. But if disabled the non-hovered active text becomes black on black BG. You need to re-structure your style rules / ordering.
Where possible try to avoid using !important where you can as it can make tracking down styling issues very difficult (speaking from experience, I've produced some really nasty style-sheets lazy-coding with it).