html - 悬停时显示内容

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>