I need to change style if i hover on media-body checkbox should show up
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a>
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li><br/>
</ul>
</div>
Inline CSS has higher priority then outline, so you're changes are applied but are still overridden by your inline styles.
The simplest trick to make it work could be to set !important to your css.
.media-body ul:hover input[type="checkbox"] {
display: block !important;
}
JSFiddle: http://jsfiddle.net/WgQT5/
Anyway the right way would be to put inline styles outside of HTML.
Moreover your HTML is not valid. It should be
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li> <!-- </li> missing -->
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"/></li><!-- <br/> is invalid here and slash at the and of input was missing-->
</ul>
</div>
Your problem is that the inline style float: right; display: none; has higher priority than the style defined in CSS.
I would suggest to add a default style in CSS equivalent to the inline one and then override this one:
CSS:
.media-body ul input[type="checkbox"] {
float: right;
display: none;
}
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li>
<li><input type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li>
</ul>
</div>
Only add !important and greater than selector
.media-body ul:hover > li input[type="checkbox"] {
display: block !important;
}
LIve code
Related
I am trying to make div element visible on focus but it is not working. If i change focus to hover it works
JSFIDDLE https://jsfiddle.net/9bo81jyy/8/
HTML
<div class="test">
<nav class="nav">
<ul class="navtabs">
<li>
<a href="showMe/1">
<div class= "inside">
<div tabindex="0" class="delete">
<button tabindex="-1" class="fa-times-circle"> </button>
</div>
</div>
</a>
</li>
</ul>
</nav>
</div>
CSS
.nav > ul.navtabs > li > a > div:focus .delete{
display: inline !important;
}
.delete{
display: none;
}
only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle
.nav > ul.navtabs > li > a:focus .delete{
border: 1px solid red;
display: inline;
}
This <div tabindex="0" class="delete"> is not available in the DOM because of this CSS:
.delete{
display: none;
}
So that <div> can never be clicked on and can never receive focus.
Instead try focus on the <a> tag:
ul.navtabs a:focus .delete{
display: inline !important;
}
And remove the tabindex="0" on the <div>.
i am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
Here is the new css you should use:
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}
Then your html should look like this:
<body>
<ul class="block1">
<li class="home">Home</li>
<li class="hidden" >
contact us
</li>
<li>about</li>
<li>Investor</li>
<li> what we do</li>
</ul>
</body>
Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>
Here is the JSFiddle: Example of OP Code
i don't understand is why would display property won't work on a
single li element.
The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.
In your case, you are trying to use display:none to hide a li and make it display by means of hover.
Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)
.block1 {
background-color: #736570;
margin: 0px;
}
ul a {
color: white;
}
ul li {
list-style-type: none;
padding: 5px;
}
.hidden {
display: none;
}
.block1:hover .hidden {
display: block;
}
.hidden a:hover {
background-color: #f1f1f1;
}
.home
<html>
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about
<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
</html>
I have this HTML:
<div class="nav">
<ul class="nav-dots">
<li class='ni n1'><a href="" class='nia'>dot</a></li>
<li class='ni n2'><a href="" class='nia'>dot</a></li>
<li class='ni n3'><a href="" class='nia'>dot</a></li>
</ul>
</div>
With this CSS:
.nav-dots {
display: inline-block;
}
As you can see, the <li> elements should display inline, but, they don't, and I have no idea why. How can I fix this?
I made a jsfiddle
.nav-dots is a class added to the parent ul. You need to call display: inline; on the lis themselves
li {
display: inline;
list-style-type:none;
}
FIDDLE
It should be
.nav-dots li {
display: inline-block;
}
or
.ni {
display: inline-block;
}
Your CSS is applying the inline-block display property to the ul, not the li children
also
.ni{display:inline}
will work
display is not a property that is inherited. In order to keep the same structure you have and make the list items inline, you have to explicitly set their display property to inherit:
li {
list-style-type:none;
display:inherit;
}
Here's a jsFiddle
How should I make the ul to display inline. I need a css that can display the list inline in header navigation of my website
<div id="sidebar2" style="display: inline-block;">
<div class="widget login_widget">
<h3>My Account</h3>
<ul class="xoxo blogroll" style="color: red;">
<li>
Dashboard
</li>
<li>
Edit Profile
</li>
<li>
Change Password
</li>
<li>
My Favorites
</li>
<li>
Add Listing
</li>
<li>
Logout
</li>
</ul>
</div>
</div>
This would work
li {
display: inline-block;
}
Add this css style to your stylesheet
li {
display: inline-block;
float: left;
margin: 0 5px;
}
Make sure to use a clear: both after ul
Try this,
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
You can use display: inline for your list items:
ul.xoxo li{display:inline;}
Also note that you need to remove " after login_widget inside login_widget"="" to make your HTML markup becomes valid.
Fiddle Demo
At the beginning, just add:
<style>
li {
display:inline;
}
</style>
How to display button when cursor over on <a> tag ?
I did this with CSS, I've tried the following but did not work:
CSS Part:
.NameClass:hover > ul {
display: block;
}
HTML Part:
<a target="_blank" href="#" class="current-path-button NameClass" >
Shop
<ul class="dropdown-menu customize-dropdown-menu" style="display: none">
<li><i style="color: black; font-size: 36px;" class="fa fa-shopping-cart"></i></li>
</ul>
</a>
your code is right, just, put display:none into your external css, your problem is caused by inline css overriding that css!
check this codepen
Use this:
a:hover + button {
display: block;
}
Here is a fiddle for this: http://jsfiddle.net/afzaal_ahmad_zeeshan/Xg22U/
For your code, you can use this:
.NameClass:hover + ul.dropdown-menu {
display: block;
}
try this:
.NameClass:hover > ul {
display: block !important;
}
it is because of prioritize. inline styling is in high priority than CSS style, so you need set !important after CSS style.
jsFiddle is here