Question

我的网站中有以下几行代码......

HTML：

<div id="left-sidebar" class="span3 sidebar">
    <ul class="product-categories">
        <li class="cat-item cat-item-60"><a href="product-category/hot-deals/">Hot Deals</a></li>
        <li class="cat-item cat-item-61"><a href="product-category/starter-kits/">Starter Kits</a></li>
        <li class="cat-item cat-item-62"><a href="product-category/mechanical-mods/">Mechanical Mods</a></li>
        <li class="cat-item cat-item-65"><a href="product-category/batteries-chargers/">Batteries &amp; Chargers</a>
            <ul class="children">
                <li class="cat-item cat-item-78"><a href="product-category/batteries-chargers/battery-cases/">Battery Cases</a></li>
            </ul>
        </li>
        <li class="cat-item cat-item-67"><a href="product-category/accessories/">Accessories</a></li>
        <li class="cat-item cat-item-68"><a href="product-category/diy-supplies/">DIY Supplies</a></li>
        <li class="cat-item cat-item-70"><a href="product-category/coming-soon/">Coming Soon</a></li>
        <li class="cat-item cat-item-71"><a href="product-category/clearance/">Clearance</a></li>
    </ul>
</div>

CSS：

.sidebar ul.product-categories li ul.children {
    display: none;
    visibility: hidden;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.sidebar ul.product-categories li:hover ul.children {
    display: block;
    visibility: visible;
}

最终会产生 - http://codepen.io/anon/pen/zrKvy/。

我如何制作它，以便当用户将鼠标悬停在列出的项目上时，子菜单“逐渐显示”，在200毫秒的持续时间内从不可见变为可见？

Answer 1

将默认不透明度设置为0，并在悬停时将其更改为1.

.sidebar ul.product-categories li ul.children {
    opacity: 0;
}
.sidebar ul.product-categories li ul.children {
    display: inline-table;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.sidebar ul.product-categories li:hover ul.children{
    opacity: 1;
}

子菜单显示效果

1 个答案: