This works in Chrome, Safari, and Firefox. But not in IE9. I want to remove the blue background from the dropdown-menu hover.
I have a twitter bootstrap dropdown-menu.
<ul class="dropdown-menu">
<li>
Sign out
</li>
</ul>
In my overrides.css (loaded after bootstrap.min.css)
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: red;
background-color: white;
background-image: none;
}
However, in IE the background-color and background-image is not working, it's still the twitter bootstrap blue. The color works fine, it is red when I hover.
Any help is greatly appreciated!
Here is a jsfiddle with my example: http://jsfiddle.net/tcpxq/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: red;
background-color: white;
background-image: none;
filter: none;
}
Related
I'm having some difficulty tying to change the how the menu items would look as once hovered over. Currently it is set to highlight when hovered over but I would like it to be underlined instead.
Use text-decoration: underline; on hover and remove the color definetion :
.navbar-nav > li > a:hover {
color: black;
text-decoration: underline;
}
As I see it override by other css so use !important
.navbar-nav > li > a:hover {
color: black!important;
text-decoration: underline!important;
}
EDIT
Can i increase the weight/thickness of the underline
Use border-bottom instead text-decoration
.navbar-nav > li > a:hover {
color: black!important;
text-decoration: none;
border-bottom: 10px solid black;
}
Style all anchors/links:
.navbar li a {
color: blue !important;
}
Style anchors/links under ul:
.navbar ul li a {
color: blue !important;
}
I would like to achieve 2 different scenarios:
Style all links, except those under ul
Style all links, except those under class .dropdown-menu (ul)
JsFiddle
Do you mean all nested links should not be colored blue? if so change the css as below.
.navbar li a {
color: blue !important;
}
/* Link under ul only */
.navbar ul.dropdown-menu li a {
color:initial !important;
}
Use this selector to style only the first ul. and the under color is different
.navbar-nav > li > a {
color: blue !important;
}
see this fiddle: https://jsfiddle.net/v2xmc150/2/
I have this code in my custom css theme on opencart. I want to add hover color on it. How can i do that? Thank you
.navbar .nav li:nth-child(2) a {
background-color: #3cbc67; /* for second link bg */
color: #d61d1d; /* for first link text color */
}
Use the pseudo selector :hover
.navbar .nav li:nth-child(2) a {
color: blue;
}
.navbar .nav li:nth-child(2) a:hover {
color: red;
}
<nav class="navbar">
<ul class="nav">
<li><a>I dont do anything</a></li>
<li><a>I change color when hover</a></li>
</ul>
</nav>
.navbar .nav li:nth-child(2) a:hover {
//styles goes here
}
I am trying to prevent the hover and focus effect only on first row, but when I am applying "first-child" pseudo code it applies to all the rows.. Here's the code:
/* CSS */
ul {list-style-type: none;}
ul > li > a {
background: transparent;
font: normal 12px Arial, sans-serif;
color: #007DBD;
margin: 0;
border-radius: 0;
padding: 7px 10px;
width:200px;
}
ul > li > a:first-child {
color:#333;
background: none;
}
ul > li > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
/* HTML */
<ul>
<li>sample#test.com</li>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
I don't want any hover effect for first <li><a> item.
Here's the js-fiddler:
http://jsfiddle.net/123qyrtc/
Please let me know if there is any CSS solution...
ul > li:first-child > a:hover, ul > li:first-child > a:focus {
color:#333;
background: none;
text-decoration:underline
}
To clarify, you don't want the first part (sample#test.com) to have a hover effect, correct? You need to target the first li then, like so:
ul > li:first-child > a:hover {
color:#333;
background: none;
}
Use the :not() pseudo to exclude what you don't want:
Updated JsFiddle
ul > li:not(:first-child) > a:hover, ul > li > a:focus {
color: #009BE1;
background: #F3F3F3;
text-decoration: none;
}
Just remember that the :first-child in this case is the <li>, not the a. The a is always first.
There's a background hover in the bootstrap 'More' dropdown in the left nav here which I'm trying to get rid of, I can't see where the background colour is coming from and I removed all background hovers.
Anyone know how I can locate the CSS affecting it?
EDIT: sorry, this answer is dedicated to the bug in the dropdown on the right side.
Is it this piece of code that is bugging you:
Structure.css / line 596:
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover
{
background-color: #464358 !important;
color: #fff;
}
I found that one with the Firebug extension for Firefox. Install, rightclick on the item, "analyze with Firebug".
Today browsers come with built-in element inspection tools, but Firefox has the popular Firebug plugin as well. You should have the option to artificially set :hover on an element you are inspecting.
Anyway, you don't need to know where the rule is to override it. Just set background-color: auto !important on the selector, that should do the trick.
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover {
background-color: #464358 !important;}
Remove this lines
Use firebug for it #left-nav .dropdown-menu > li > a:hover
CSS line 1353
Try this:
ul.dropdown-menu li a:hover{
background: #fff !important;
cursor: default;
}
Or this if you want to achieve the same parent background color:
ul.dropdown-menu li a:hover{
background: transparent !important;
cursor: default;
}