css - 修复了在 Safari 浏览器中悬停的 div

Question

我在这个标题内的页面中固定了标题我有一个带有属性的菜单(不显示)当我将鼠标悬停在这个标题(header_b)上时，菜单将显示(显示 block )但它在除 Safari 浏览器之外的所有浏览器中都能正常工作.

<style>
.subnav_dd{
    display: none;
    z-index: 99999;
    float: left;
    position: absolute;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background-color: #EEE;
    margin-top: 24px;
    margin-left: -13px;
    width: 180px;
    padding: 0px;
    overflow: hidden;
    -moz-box-shadow: 1px 2px 3px #CCC; 
    -webkit-box-shadow: 1px 2px 3px #CCC;     
    box-shadow: 1px 2px 3px #CCC;
}
#nav_library:hover .subnav_dd{
    display: block;
}
</style>
  <div id="header_b" style="position: fixed; width: 100%; z-index: 999; top:60px;">
   <div id="nav_library" class="mnb_on">
     <div id="dd_library" class="subnav_dd" align="left">Code ....... </div>
   </div>
  </div> 

Answer 1

在你的例子中 - #nav_library 元素没有宽度/高度/内容，所以你不能真正悬停它(没有可用的悬停区域) .

请注意，在此示例中，您不能悬停 #nav_library 元素(在任何浏览器中):

.subnav_dd{
  display: none;
  z-index: 99999;
  float: left;
  position: absolute;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  background-color: #EEE;
  margin-top: 24px;
  margin-left: -13px;
  width: 180px;
  padding: 0px;
  overflow: hidden;
  -moz-box-shadow: 1px 2px 3px #CCC; 
  -webkit-box-shadow: 1px 2px 3px #CCC;     
  box-shadow: 1px 2px 3px #CCC;
}
#nav_library:hover .subnav_dd{
  display: block;
}

<div id="header_b" style="position: fixed; width: 100%; height: 50px; z-index: 999; top:60px; border: 1px solid red;">
  <div id="nav_library" class="mnb_on">
    <div id="dd_library" class="subnav_dd" align="left">Code ....... </div>
  </div>
</div>

虽然这个例子表明你可以(我添加了一个边框来使元素占据屏幕上的区域):

.subnav_dd{
  display: none;
  z-index: 99999;
  float: left;
  position: absolute;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  background-color: #EEE;
  margin-top: 24px;
  margin-left: -13px;
  width: 180px;
  padding: 0px;
  overflow: hidden;
  -moz-box-shadow: 1px 2px 3px #CCC; 
  -webkit-box-shadow: 1px 2px 3px #CCC;     
  box-shadow: 1px 2px 3px #CCC;
}
#nav_library {
  border: 1px solid blue;
}
#nav_library:hover .subnav_dd{
  display: block;
}

<div id="header_b" style="position: fixed; width: 100%; height: 50px; z-index: 999; top:60px; border: 1px solid red;">
  <div id="nav_library" class="mnb_on">
    <div id="dd_library" class="subnav_dd" align="left">Code ....... </div>
  </div>
</div>