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.
Related
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 know it's a dumb question but I couldn't find a solution myself. I have two lists in my HTML page. First one is :
<ul id="menu">
<li><a href='#Url.Action("MainPage","Shirts")'>Main Page</a></li>
<li><a href='#Url.Action("OnSale","Shirts")'>On Sale</a></li>
<li><a href='#Url.Action("Recent","Shirts")'>Recent</a></li>
</ul>
The second one is a PagedListPager which generates an HTML list :
#Html.PagedListPager(Model, page => Url.Action("Mainpage",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
This is my CSS for this HTML :
ul {
list-style-type:none;
margin:0;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:140px;
}
li:hover a {
background: #19c589;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
}
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
}
My problem is that, I want my CSS to work for only the first list, not the second one. I know I need to add a class for first list's elements and edit CSS for that class. But I couldn't do it. I don't know what to do for li ul li a in CSS. Can you tell me how to edit CSS and first list in this case? Thanks.
Try:
#menu > li {
display:inline-block;
float: left;
margin-right: 1px;
}
#menu > li a {
display:block;
min-width:140px;
}
You can use CSS3 child selectors to select specific properties:
ul li a { /* shared styles */ }
ul > li > a { /* parent list styles */ }
ul ul > li > a { /* child list styles */ }
https://css-tricks.com/child-and-sibling-selectors/
You say you have two lists on your page (so two ul elements). And you only want to apply certain css to the first list without using a class or id selector.
You can use the first-of-type pseudo selector, like so:
ul:first-of-type { }
And to apply the css to its children:
ul:first-of-type li { }
According to Can I use this is pretty well supported (unless you need IE8 support).
here is my html code
<div id="menus">
<ul>
<li>Home</li>
<li>Users</li>
<li>Project Manage</li>
<li>Transaction</li>
<li style="border-right:none;">Logout</li>
</ul>
</div>
here is my CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how??
Thanks in advance..
You can do it with CSS only using focus and tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
A good way to employ an 'active' menu item solution is this
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
No, you can not do this with just css. I am not too sure what to say...
If you want to have a page specific active, place a different class in the backend, example:
I have a drop down menu done in css only, done in the following way:
.top-menu
{
padding:0;
margin:0;
list-style: none;
height:50px;
}
.top-menu > li > a
{
display:block;
text-decoration:none;
font-size:16px;
line-height:16px;
padding:15px 20px;
border: 1px solid transparent;
color:#fff;
}
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
.top-menu > li.popout:hover ul
{
display:block;
}
The class "top-menu" is for the top level ul element.
What I want to do is apply the ".top-menu > li > a:hover" style for when I hover over the popout ul, so that the top level link has the hover style also when I hover above its descendants in the ul below.
Thanks.
Here is the html:
<ul class="top-menu">
<li>Home</li>
<li>
Welcome
</li>
<li class="popout">
link2
<ul>
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
I want to apply the hover style for link2, when I hover over the descendant ul (which contains sublink2 and sublink1)
I know this was asked a while back, but for others having your problem I believe you can achieve the desired results by changing this:
.top-menu > li > a:hover
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
The '>' means the direct child. If you leave the '>' out you can get all child elements matching the selector. Below achieved the results I believe you desire:
ul li:hover > a
{
background-color: #fff;
color: #333;
border: 1px solid #004488;
}
That way when you hover over the child the parent will still display the hover styles.
I believe you need to use JavaScript for that particular behavior. There is no way for you to apply styles to the parent and child at the same time.
Edit: Thinking about this again, you could do something like that:
.topmenu:hover > li.popout {...} /* Parent styles */
.topmenu:hover li.popout ul {...} /* Child styles */
I have the following:
<ul id='foo'>
<li class='fooitem'>
<ul class='grok'>
<li class='grokitem'></li>
</ul>
</li>
</ul>
I want to style the fooitem elements differently than the grokitem elements:
#foo li {
background-color: red;
}
.grok li {
background-color: green;
}
but the #foo li definition is overriding the .grok li definition, so all are appearing red. How do I define a style for the grok items?
Thanks
You need a slightly different style rule (currently the first, with an ID, has a greater level of specifity).
You can resolve it like this:
#foo li {
background-color: red;
}
#foo .grok li {
background-color: green;
}
You can give it a try here
You can do it by creating a more specific rule like so:
#foo li {
background-color: red;
}
#foo .grok li {
background-color: green;
}
Since your lis appear to have classes assigned to them, you can target them specifically, like so:
ul.grok li.grokitem
{
/* your styles here */
}
#foo li {
background-color: red;
}
#foo .grok li {
background-color: green;
}
You don't need any classes in your example
#foo li { background-color: red; } // All <li>s in foo
#foo li li { background-color: green; } // All <li>s in <li>s in foo