Question

如果我悬停在media-body checkbox上，我需要更改样式

.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>

Answer 1

内联CSS优先于大纲，因此您应用了更改，但仍然被内联样式覆盖。

使其成功的最简单方法是将!important设置为您的CSS。

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

JSFiddle：http://jsfiddle.net/WgQT5/

无论如何，正确的方法是在HTML之外放置内联样式。

此外，您的HTML无效。它应该是

<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>

Answer 2

您的问题是内联样式float: right; display: none;的优先级高于CSS中定义的样式。

我建议在CSS中添加一个等同于内联的默认样式，然后覆盖这个样式：

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>

Answer 3

只添加！important和大于选择器

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

LIve code

悬停时显示内容

3 个答案: