如何使用 metro ui css sidebar 和 compact 类

Question

我在使用侧边栏和紧凑型 class 时遇到问题。在此 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>

Answer 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，它删除了压缩 class 以在鼠标结束时拉伸它，并在鼠标离开时添加压缩 class 以将其压缩回来

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

如何使用 metro ui css sidebar 和 compact 类

How to use metro ui css sidebar and compact classes

metro-ui-css