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");
    });
});

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

1 个答案: