如何使用 Metro ui CSS 侧边栏和紧凑类答案

【问题标题】：How to use metro ui css sidebar and compact classes如何使用 Metro ui CSS 侧边栏和紧凑类
【发布时间】：2016-04-29 16:21:46
【问题描述】：

我在使用侧边栏和紧凑类时遇到问题。在这个 ul 中，我想显示内容的图像，而不是它们的文本。文本将仅在鼠标悬停时出现。

<ul class="sidebar compact">
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">1</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">2</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">3</span>
    </a>
</li>

【问题讨论】：

标签： metro-ui-css

【解决方案1】：

添加下面给出的 jQuery，使其在鼠标悬停和离开时仍然有效

<ul class="sidebar compact">
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">1</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">2</span>
    </a>
</li>
<li>
    <a href="#">
        <span class="mif-apps icon"></span>
        <span class="title">all items</span>
        <span class="counter">3</span>
    </a>
</li>

这是一个 jQuery，它在鼠标悬停时删除紧凑类以拉伸它，并在鼠标离开时添加紧凑类以将其压缩回来

<script type="text/javascript">
$(document).ready(function () {
    $('.sidebar').hover(function () {
        $(".sidebar").removeClass("compact");
    });
    $('.sidebar').mouseleave(function () {
        $(".sidebar").addClass("compact");
    });
});

【讨论】：