CSS：hover不适用于某些元素

Question

I experience a strange problem..

On some elements the :hover effect is not applied

 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> 

The logoff button in the header has the :hover effect but the two Test buttons in the main content hasn't

What am I doing wrong?!

Answer 1

That's because the #main style has z-index: -1 . That places it behind the container element.

Answer 2

You have

#main {
    position: absolute;
    z-index: -1;
}

#main 's parent, #container , doesn't create any stacking context (because it has default opacity and isn't a positioned element with z-index different than auto ). Therefore, #main and #container belong to the same stacking context.

Then, since #main is a stacking context with negative stack level, it will be shown under (in z-axis) the background of #container . Then, hovering #main contents is like hovering parent's background.

Therefore, :hover doesn't apply.

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

Answer 3

very simple. just change the width of sidebar and you'll see it is working fine. actually sidebar is overlapping on your main div. check this below http://oi61.tinypic.com/20j0182.jpg