CODEWITHSUNDEEP
htmlcss
Erick
Erick

Reputation: 250

show content when hover

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>

Upvotes: 0

Views: 120

Answers (3)

Suraj Rawat
Suraj Rawat

Reputation: 3763

Only add !important and greater than selector 

.media-body ul:hover > li input[type="checkbox"]  {
 display: block !important;
 }

LIve code

Upvotes: 1

Michael Rose
Michael Rose

Reputation: 7820

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>

Upvotes: 1

Jakub Matczak
Jakub Matczak

Reputation: 15656

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>

Upvotes: 2

Related Questions