Question

我正在尝试为个人网站制作导航。我觉得我的功能或多或少都是我想要的，但我遇到了一些我希望得到帮助的问题。

以下是指向my JSfiddle的链接。

首先，我不确定CSS转换后导航图标发生了什么。我正在尝试将cursor：pointer属性应用于X，但它似乎没有采取。我做错了什么？

参考代码：

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    right: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

另外，我在让li元素淡入时遇到了问题。我正在尝试使用CSS来设置这种转换，但是我也很难接受它。

参考代码：

.bt-menu ul {
position: fixed;
z-index: 100;
top:30%;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
-webkit-transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out;

-moz-transition：背景颜色0.3s易于进出，能见度0.3s易于进出; -ms-transition：背景色0.3s易于进出，能见度0.3s易于进出; -o-transition：背景色0.3s易于进出，能见度0.3s易于进出; 过渡：背景颜色0.3s易于进出，能见度0.3s易于进出;

}

如果我能得到一些帮助，我将不胜感激。

谢谢大家。

Answer 1

第一期：你有X cursor : pointer，并且工作正常，它只是被一个类<div class="bt-overlay"></div>的div重叠所以修复将是：

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    right: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index:99;
}

第二期：

可见性不是标准，而是使用不透明度，它可以正常工作

这是修复：

.bt-menu ul li {
    padding: 16px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    }

CSS转换导航问题

1 个答案: