javascript - CSS :hover not applied on some elements

Question

我遇到了一个奇怪的问题..

在某些元素上 :hover 效果不适用

html,
body {
  height: 100%;
}
body {
  margin: 0;
  color: #3b3b3b;
  font-family: tahoma;
  font-size: 12px;
  background: #f5f5f5;
}
body.toggle {
  overflow: hidden;
}
#main_content {
  height: 100%;
}
#preloader_content {
  z-index: 99999;
  position: absolute;
  top: 0;
  left: 0;
  background: #303030;
  width: 100%;
  height: 100%;
}
#preloader_content > div {
  position: absolute;
  width: 200px;
}
#preloader_percentage {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 32px;
  font-family: arial;
  font-weight: bold;
  text-align: center;
}
#container {
  padding-top: 80px;
  height: 100%;
  box-sizing: border-box;
}
#header {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 80px;
  min-width: 600px;
  width: 100%;
  box-sizing: border-box;
}
#header_mobile {
  height: 100%;
  display: none;
  box-sizing: border-box;
  background: #303030;
  color: #d9d9d9;
}
#header_desktop {
  height: 100%;
  margin-left: 200px;
  box-sizing: border-box;
  background: #fff;
}
#sidebar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #303030;
  color: #d9d9d9;
  box-sizing: border-box;
}
#sidebar.toggle {
  z-index: 0;
  display: block;
}
#logo {
  position: absolute;
}
#menu {
  position: absolute;
  top: 80px;
  width: 100%;
  bottom: 0;
  overflow-y: auto;
}
#main {
  position: absolute;
  z-index: -1;
  min-width: 600px;
  width: 100%;
  max-width: 1400px;
  padding-left: 200px;
  box-sizing: border-box;
}
.mobile_header_actions {
  float: right;
}
.mobile_header_actions > div {
  display: inline-block;
  margin-right: 20px;
}
.btn_mobile_header_toggle {
  background: url(/gfx/btn.mobile_header_toggle.png) no-repeat center;
  cursor: pointer;
  height: 50px;
  width: 50px;
}
.btn_mobile_header_toggle.toggle {
  background-color: rgba(0, 0, 0, 0.5);
}
.sidebar_page_ul,
.sidebar_subpage_ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.sidebar_section {
  padding: 10px 10px 10px 20px;
  font-size: 11px;
  color: #c2c2c2;
}
.sidebar_page {
  padding: 10px 10px 10px 30px;
  font-size: 13px;
  font-weight: bold;
  transition: background-color 0.2s ease 0s;
  cursor: pointer;
}
.sidebar_arrow {
  background: url(/gfx/sidebar_arrow.png) no-repeat center;
  float: right;
  height: 18px;
  width: 18px;
}
.sidebar_arrow.active {
  transform: rotate(90deg);
}
.sidebar_subpage_ul {
  display: none;
}
.sidebar_subpage_ul.active {
  display: block;
}
.sidebar_subpage {
  padding: 10px 10px 10px 30px;
  background-color: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  transition: background-color 0.2s ease 0s;
  cursor: pointer;
  opacity: 0;
}
.sidebar_page.active,
.sidebar_page:hover,
.sidebar_subpage.active,
.sidebar_subpage:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}
@media (max-width: 767px) {
  #container {
    padding-top: 50px;
  }
  #header {
    height: 50px;
  }
  #header_mobile {
    display: block;
  }
  #header_desktop {
    display: none;
  }
  #sidebar {
    display: none;
  }
  #menu {
    top: 50px;
  }
  #main {
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  #sidebar {
    width: 200px !important;
  }
  #main {
    left: 0 !important;
  }
}
@media (min-width: 992px) {}@media (min-width: 1200px) {} button {
  background:linear-gradient(#f5f5f5,
  #f1f1f1);
  border:1px solid rgba(0,
  0,
  0,
  0.1);
  box-sizing:content-box;
  border-radius:2px;
  display:inline-block;
  min-width:50px;
  color:#444;
  font-size:11px;
  font-weight:bold;
  padding:4px 8px 5px 8px;
  text-align:center;
  transition:all 300ms ease 0s;
  margin:0 6px 0 0;
  cursor:pointer;
}
button:hover {
  background: linear-gradient(#f8f8f8, #f1f1f1);
  border-color: #c6c6c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #222;
}
button.cta {
  background: linear-gradient(#4d90fe, #4787ed);
  border: 1px solid #3079ed;
  color: #fff;
}
button.cta:hover {
  background: linear-gradient(#4d90fe, #357ae8);
  border-color: #2f5bb7;
}

<div id="main_content">
  <div id="container">
    <div id="header">
      <div id="header_mobile">Header Mobile
        <button class="cta" id="e1">Log off</button>
        <div class="mobile_header_actions">
          <div class="btn_mobile_header_toggle" id="e3"></div>
        </div>
      </div>
      <div id="header_desktop">Header Desktop
        <button class="cta" id="e2">Log off</button>
      </div>
    </div>
    <div id="sidebar">
      <div id="logo">Logo</div>
      <div id="menu">
        <div id="e0">
          <ul class="sidebar_page_ul">
            <li>
              <div class="sidebar_section">Accounts</div>
            </li>
            <li>
              <div class="sidebar_page" id="e4">Overview</div>
            </li>
            <li>
              <div class="sidebar_page" id="e5">Bookkeeping
                <div class="sidebar_arrow"></div>
              </div>
              <ul class="sidebar_subpage_ul" id="e6">
                <li>
                  <div class="sidebar_subpage" id="e7">Bilag</div>
                </li>
                <li>
                  <div class="sidebar_subpage" id="e8">Daglig</div>
                </li>
              </ul>
            </li>
            <li>
              <div class="sidebar_page active" id="e9">
                Chart of accounts
              </div>
            </li>
            <li>
              <div class="sidebar_section">Administration</div>
            </li>
            <li>
              <div class="sidebar_page" id="e10">Client</div>
            </li>
            <li>
              <div class="sidebar_page" id="e11">Accounts</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="main">
      <div style="padding:20px">
        account
        <button>Test</button>
        <button class="cta">Test</button>
      </div>
    </div>
  </div>
</div>

标题中的注销按钮具有:hover 效果，但主要内容中的两个测试按钮没有

我做错了什么？!

Answer 1

那是因为#main 样式有z-index: -1。这将它放在容器元素后面。