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
}
Related
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/
This simple code is not working:
HTML:
<div id="topnav">
<ul>
<li>Aaaaaaa</li>
<li>Bbbbbbbb</li>
<li>Ccccccccc</li>
</ul>
</div>
CSS:
#topnav li a:hover:first-child{
color:#ff0000;
}
#topnav li a:nth-child(2):hover{
color:#FF7700;
}
#topnav li a:nth-child(3):hover{
color:#FFFF00;
}
Each link should have a different hover color. All of them show up as red. Why?
JSFiddle: http://jsfiddle.net/jeZHD/
Because there is only one <a> per parent element. That means, every <a> is the first child of its parent <li>.
Try it on <li> instead.
Working example: http://jsfiddle.net/jeZHD/2/
Here:
#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }
After wasting so much time on this, I just realized that the nth-child should be on the li's, not the a's. Like so:
#topnav li:first-child a:hover{
color:#ff0000;
}
#topnav li:nth-child(2) a:hover{
color:#FF7700;
}
#topnav li:nth-child(3) a:hover{
color:#FFFF00;
}
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;
}
I have a menu using pure CSS, hover a parent li item display the the nested list. A simplified example:
<ul id="menu-top" >
<li class="menu-item">
Forums
<ul class="sub-menu">
<li>Register</li>
<li>Activate</li>
<li>Members</li>
</ul>
</li>
</ul>
The css:
.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color
.navigation ul.sub-menu li {
display:none;
}
.navigation ul li:hover > ul.sub-menu li { display: block; }
It works ok, but I'm trying to add an "persistent" effect, I want keep the parent style set when hovering also the sub-item.
I tried this but can't get working:
.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}
I don't know if this is possible without javscript or else, also can't find anything about using ">" in CSS.
THanks for any help
:hover is triggered on all ancestors of the element that is being hovered over, so .navigation ul.menu li:hover { background: #ccc; } should work just fine.
Alternatively, someday we should be able to use :has().
.menu-item:hover {
background-color:#ccc;
}
.sub-menu li:hover {
background-color:#666;
}
I have this HTML code:
<ul>
<li>Line 1</li>
<li class="disabled">Line 2</li>
</ul>
And the corresponding CSS is:
ul li:hover {
color: red;
}
This allows for both lis to be hovered over and have their color changed. But if I want one of them to be disabled, I’d use the following:
.disabled {
color: grey;
}
But the other CSS code’s hover pseudo-class still has effect. Is there any way I can override this?
The first rule overrides it because of CSS specificity, i.e. it's more specific.
Change second rule to:
ul li.disabled, ul li.disabled:hover{
color:grey;
}
Change your CSS To:
ul li:hover{
color:red;
}
.disabled ,.disabled:hover{
color:grey;
}
See this fiddle
Updating for the 2020s, you can now use :not to your advantage
.disabled {
color:grey;
}
ul li:not(.disabled):hover{
color:red;
}
<ul>
<li>Line 1</li>
<li class="disabled">Line 2</li>
</ul>
You just need to change your css:
ul li:hover{
color:red; }
ul li.disabled,ul li.disabled:hover{
color:grey; }
You have to disable the hover effect, so you give it the same color as when it wasn't hovered.
.disabled{
color:grey !important;
}
I was trying to get a CSS "disabled" effect to be applied automatically when doing the following javascript:
document.getElementById("TheButton").disabled = true;
If "TheButton" is defined with the class "TheClass":
.TheClass { background-color: LightBlue; }
.TheClass:hover { background-color: Cyan; }
The only thing that worked for me was with this CSS:
.TheClass[disabled] { background-color: lightgrey; } /* for IE */
.TheClass[disabled='disabled'] { background-color: lightgrey; } /* for Chrome */
.TheClass[disabled]:hover { background-color: lightgrey; } /* for IE */
.TheClass[disabled='disabled']:hover { background-color: lightgrey; } /* for Chrome */
Minimum, if only need grey at every time, no need :hover on .disabled
ul li:hover{
color:red;
}
ul li.disabled{// Last rule precedence
color:grey;
}
Or for speed updating, use !important:
.disabled{
color:grey !important;
}
ul li:hover{
color:red;
}
You can just do following in the css to discard any color for disabled elements while we hover on it.
ul li:hover:not(:disabled) {
color: red;
}
This will cause the color red to be applied only when list is not disabled.