CSS 转换导航问题

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 缓入出； transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out;

}

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

谢谢大家。

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