metro-ui-css - 如何使用 Metro ui CSS 侧边栏和紧凑类

Question

我在使用侧边栏和紧凑类时遇到问题。在这个 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，它在鼠标悬停时删除紧凑类以拉伸它，并在鼠标离开时添加紧凑类以将其压缩回来

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