代码之家  ›  专栏  ›  技术社区  ›  mHelpMe

更改了菜单栏颜色,现在将鼠标悬停在按钮上时无法再看到菜单

css html
  •  2
  • mHelpMe  · 技术社区  · 7 年前

    我有一个菜单栏,其中包含一个按钮,当悬停在上面时,显示菜单项列表。

    我最近把菜单栏的颜色从纯色改成了更现代的渐变色。

    我也把我的纽扣换成了同样的颜色。但是当我把鼠标悬停在菜单上时,什么也不会显示。我不明白为什么换了颜色会这样做,怎么再看菜单?

    这是 my fiddle

    新颜色 

         /* Dropdown Button */
.dropbtn {
  -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
   background-color:#bddbfa;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }

    变动前 

       /* Dropdown Button */
.dropbtn {
   background-color: #9FACEC;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }
    3 回复  |  直到 7 年前
        1
  •  1
  •   Mr Lister hawi    7 年前

    我不认为这与颜色的变化有关,只是一个小的意外html代码调整,而更新可能。
    我有点困惑,有一个外部div似乎什么也没做(没有关联的css类),我删除了它。在我做了这件事之后 </div> 标记在html中,只需要对css类进行一次小的更新就可以实现这个功能(我在css中将下拉类向上移动并包括 position:relative .. 小事情)。

    这是工作代码和 fiddle 

    body {
  padding: 0px;
  margin: 0px;
}


/*padding: 6px 5px;*/

.navbar {
  width: 50%;
  display: block;
  margin: 0px;
  padding: 0px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 25px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.two {
  width: 35px;
}

.three {
  width: 50px;
}

.navbar:hover div {
  width: 60px;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Button */

.dropbtn {
  -moz-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  box-shadow: inset 0px 1px 0px 0px #dcecfb;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
  background: -moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
  background-color: #bddbfa;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropbtnSub {
  background-color: red;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: fixed;
  background-color: red;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  position: relative;
}


/* Change color of dropdown links on hover */

.dropdown-content li:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: yellow;
}

.dropdown-content-list {
  display: none;
}

.dropdown-content-list:hover {
  display: block !important;
}

.dropdown-content-li:hover .dropdown-content-list {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
  background: yellow;
}

ul {
  padding-left: 0;
}


/*background-color: #9FACEC;    /* Medium blue */

#menu {
  -moz-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow: inset 0px 1px 0px 0px #dcecfb;
  box-shadow: inset 0px 1px 0px 0px #dcecfb;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
  background: -moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: -ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
  background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
  background-color: #bddbfa;
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  top: 0;
}

.sidebar {
  height: 300px;
  background-color: Red;
  /* Red */
}


/*height: 500px;*/

.content {
  /*background-color: #F5CF8E;    /* Yellow */
  background-color: yellow;
  /* Yellow */
  overflow: hidden;
  max-height: 800px;
}

.page {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: block;
}

.headerLbl {
  align-self: center;
  width: 90%;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 14pt;
  font-family: Arial;
}
    <body>

  <div id="menu">

    <div class="dropdown">
      <button class="dropbtn">
                    <div class="navbar">
                        <div class="one"></div>
                        <div class="two"></div>
                        <div class="three"></div>
                    </div>
          </button>

      <div class="dropdown-content">
        <ul>
          <li class="dropdown-content-li">
            <button class="dropbtnSub">Region</button>
            <div class="dropdown-content-list">
              <ul>
                <li>Japan</li>
                <li>Europe</li>
                <li>USD</li>
              </ul>
            </div>
          </li>
          <li class="dropdown-content-li">
            <button class="dropbtnSub">Export</button>
            <div class="dropdown-content-list">
              <ul>
                <li>Excel</li>
                <li>CSV</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>


    </div>


    <div id="lblContainer" class="headerLbl">
      My label
    </div>


    <div class="page">


    </div>

  </div>



</body>

    希望这有帮助

        2
  •  0
  •   Kavya Hanumantharaju    7 年前

    使用:悬停并给出你的颜色,你可以在上面识别 

     .dropdown:hover{
    write your code here;
    }
        3
  •  0
  •   Kavya Hanumantharaju    7 年前 
    <style>
 .dropbtn {
  -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), 
   color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
   background-color:#bddbfa;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }
  .dropbtn:hover
   {
   -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
   box-shadow:inset 0px 1px 0px 0px #dcecfb;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9FACEC), 
   color-stop(1, #80b5ea));
   background:-moz-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-webkit-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-o-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:-ms-linear-gradient(top, #9FACEC 5%, #80b5ea 100%);
   background:linear-gradient(to bottom, #9FACEC 5%, #80b5ea 100%);
   background-color: #9FACEC;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
  }



<html>
<body>
<input class="dropbtn" type="button" value="button"/>
</body>
</html>

    以上代码工作检查

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    6 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    6 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    6 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    6 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    6 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    6 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    6 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    7 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号