个人中心
gpt4 book ai didi

html - 三明治菜单与指针填充相比的问题

转载 作者：行者123 更新时间：2023-11-28 02:39:39 25 4
gpt4 key购买 nike

发生的情况是，在三明治菜单中显示整个框的白色填充，当页面加载并且当您用鼠标光标指示选择它时它会消失。

这里是代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body style="background-color:black;">
      <style type="text/css">
           .sidebarBtn{    
              color: #fff;
              font-size: 22px;
              position: absolute;
              right: 30px;
              top: 25px;
              z-index: 101;
              cursor: pointer;
              display: none;
              height: 16px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/
              width: 27px;
              border-top: 2px solid #fff;
              display: block;
              border: none;  
              height: 26px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/
              top: 25px;
              outline: 10px solid transparent;
            }

            .sidebarBtn span{
              height: 2px;
              width: 100%;
              display: block;  
              position: absolute;
              top: 50%;
              left: 0;
              background: #fff;
              margin-top: -1px;
              -webkit-transition: background 0 0.3s;
              transition: background 0 0.3s;  
            }

            .sidebarBtn span:before,
            .sidebarBtn span:after{
              content: '';
              position: absolute;
              left: 0;
              height: 2px;
              width: 100%;
              background: #fff;
              display: block;
              -webkit-transition:bottom 0.30s linear,top 0.30s linear; 
              -moz-transition:bottom 0.30s linear,top 0.30s linear; 
              -o-transition:bottom 0.30s linear,top 0.30s linear; 
              transition:bottom 0.30s linear,top 0.30s linear;

              -webkit-transition-duration: 0.3s, 0.3s;
                -moz-transition-duration: 0.3s, 0.3s;
                transition-duration: 0.3s, 0.3s;
            }

            .sidebarBtn span:before{ 
              top: -8px;  
              -webkit-transition-property: top, -webkit-transform;
              -moz-transition-property: top, -moz-transform;
              transition-property: top, transform;
            }

            .sidebarBtn span:after{

             bottom: -8px;
                -webkit-transition-property: bottom, -webkit-transform;
                -moz-transition-property: bottom, -moz-transform;
                transition-property: bottom, transform;
            }

            .sidebarBtn:hover{
                background:rgba(255,255,255,.15);
                outline-color:rgba(255,255,255,.15);
            }               

      </style>
      <button class="sidebarBtn">
        <span></span>
      </button>
</body>
</html>

我想要的是告诉我错误在哪里以及如何解决它，因为我想去掉馅料，只剩下三明治菜单的可视化。

最佳答案

只需将 background: transparent 添加到按钮的 css 类中即可:

.sidebarBtn{    
              color: #fff;
              font-size: 22px;
              position: absolute;
              right: 30px;
              top: 25px;
              z-index: 101;
              cursor: pointer;
              display: none;
              height: 16px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/
              width: 27px;
              border-top: 2px solid #fff;
              display: block;
              border: none;  
              height: 26px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/
              top: 25px;
              outline: 10px solid transparent;
              background: transparent;
            }

Here是工作的 JSFiddle。

关于html - 三明治菜单与指针填充相比的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47243869/

25 4 0
文章推荐： html - 使用 AngularJS 从指令触发点击事件
文章推荐： html - Bootstrap 3 导航栏下拉菜单全高
文章推荐： javascript - 使用angularjs从本地json打印数据
文章推荐： jquery - Select2 文本框宽度异常