Question

当我在Total = Math.Ceiling(value)元素上悬停时，我正在尝试添加一个轻松过渡，以便<li>元素可以轻松实现。这是我的HTML：

<ul>

这是我的css：

 <header>
        <nav>
            <div id="logo" style="color: white" class="try">Techflow</div>
            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
            <div class="pull-left">
                <ul class="menu">
                    <li>
                        <label for="drop-1" class="toggle">Tech News</label>
                        <a href='@Url.Action("Index","Home")'>Tech News</a>
                        <input type="checkbox" id="drop-1" />
                        <ul>
                            <li><a href="@Url.Action("TechEvolution", "Tech")">Tech Evolution</a></li>
                            <li><a href="@Url.Action("Tablets", "Tech")">Tablets</a></li>
                            <li><a href="@Url.Action("Smartphones", "Tech")">Phones</a></li>
                            <li><a href="@Url.Action("InternetTV", "Tech")">Internet TV</a></li>
                            <li><a href="@Url.Action("UncappedInternet", "Tech")">Uncapped Internet</a></li>
                            <li><a href="@Url.Action("ReviewAndAdvice", "Tech")">Reviews and Advise...</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

Answer 1

你有一个更深层4级的选择器，这是一个很好的做法，它不会嵌套更多3级深度，因为它更可重用，如果你改变任何元素或添加一个元素你的选择器不工作

你的问题，那些礼仪应该有元素父亲和元素li，你有需要改变的属性

Answer 2

首先，您的选择器应位于最后li:hover

header nav div ul li:hover ul{
    /* CSS magic */
}

CSS没有轻松过渡，你可能会想到jQuery fadeIn？无论哪种方式，CSS transitions都是这样的：

transition: [property|all] [duration] [timing function] [delay];

例如，如果您想要从隐藏状态变为可见状态：

header nav div ul li ul{
    transition: opacity .33s ease;
    opacity: 0;
}
header nav div ul li:hover ul{
    opacity: 1;
}

将鼠标悬停在li元素上时的过渡效果

2 个答案: