如何通過懸停鼠標來顯示菜單？

Question

我正在嘗試自定義地平線儀表板（openstack）。在儀表板裏有一個Nov-accordians菜單（請看下面的圖片），我想隱藏它並且只顯示鼠標懸停在菜單區域它。這裏nav_accordion是css類。 請告訴我應該在下面的css文件中添加哪些代碼才能獲得上述效果。

僅當我們將鼠標懸停時，我纔想顯示以下菜單。該菜單位於左上角。

當鼠標懸停在菜單區菜單應該會出現。

下面的代碼是從GitHub的OpenStack（冰窖）
accordians_nav.css

@accordionBorderColor: #e5e5e5; 
.outline(@outline) { 
    outline: @outline; 
    -moz-outline-style: @outline; 
} 

.nav_accordion { 
    //N: hide the nav accordion menu 
    display:none; 
    background-color: #f9f9f9; 
    color: #6e6e6e; 
    margin: 0px 0px; 

    dt, dd { 
    padding: 10px 0 10px 0; 
    line-height: 18px; 

    h4 { 
     border: 1px solid #BBBBBB; 
     border-right: 0; 
     border-bottom: 0; 
     background-color: #f0f0f0; 
     background-repeat: no-repeat; 
     background-position: 96% center; 
     background-image: url(/static/dashboard/img/right_droparrow.png); 

     padding: 10px 0 10px 0; 
     line-height: 16px; 
     margin-top: 0; 

     color: #6e6e6e; 
     font-weight: bold; 
     text-rendering: optimizelegibility; 
     max-width: 193px; 
     padding-right: 16px; 
     cursor: pointer; 

     div { 
     color: #6e6e6e; 
     font-size: 14px; 
     margin: 0 0 0 14px; 
     display: block; 
     font-weight: bold; 
     .outline(none); 
     overflow: hidden; 
     text-overflow: ellipsis; 
     max-width: 177px; 
     } 
    } 

    h4.active { 
     border-bottom: 1px solid #BBBBBB; 
     background-image: url(/static/dashboard/img/drop_arrow.png); 
    } 
// N: This will change in the look of list 
    a { 
     color: #6e6e6e; 
     font-size: 16px; 
     margin: 0 0 0 14px; 
     padding: 0; 
     display: block; 
     font-weight: bold; 
     .outline(none); 
     text-decoration: none; 
    } 
    // TH 
    ul { 
     list-style: none outside none; 
     margin: 10px 0 0; 
     width: 222px; 
    } 

    // This is list for showing dashboard and panel 
    li { 
     a { 
     width: 185px; 
     padding: 10px; 
     display: block; 
     line-height: 18px; 
     margin-left: 20px; 
     font-weight: normal; 
     font-size: 13px; 
     } 

     a.active { 
     background: #fff;// this will change the color of active panel 
     border-top: 2px solid @accordionBorderColor; 
     border-left: 4px solid #d93c27;// this will change the color of left side of active panel 
     border-bottom: 2px solid @accordionBorderColor; 
     margin-left: 18px;// It will shift the panel rightside, so please check all the panel are aligned or not 
     .border-radius(5px 0 0 5px);// this will round the corner of panel 
     //for more info http://css3pie.com/demos/border-radius/ 
     } 

     a:last-child { 
     margin-bottom: 8px; 
     } 
    } 

    } 

    dd { 
    padding: 0; 
    font-size: 12px; 
    } 

    dt { 
    border-top: 1px solid #BBBBBB; 
    background-color: @accordionBorderColor; 
    background-repeat: no-repeat; 
    background-position: 96% center; 
    background-image: url(/static/dashboard/img/right_droparrow.png); 
    padding-right: 16px; 
    max-width: 217px; 
    cursor: pointer; 

    div { 
     color: #6e6e6e; 
     font-size: 14px; 
     margin: 0 0 0 14px; 
     padding: 0; 
     font-weight: bold; 
     .outline(none); 
     overflow: hidden; 
     text-overflow: ellipsis; 
     max-width: 201px; 
    } 
    } 

    dt.active { 
    background-image: url(/static/dashboard/img/drop_arrow.png); 
    } 

    dt:first-child { 
    border-top: 0; 
    } 

    dt a { 
    text-decoration: none; 
    } 
} 

_accordion_nav.html

{% load horizon i18n %} 
{% load url from future %} 

<div> 
    <dl class="nav_accordion"> 
    {% for dashboard, panel_info in components %} 
    {% if user|has_permissions:dashboard %} 
     {% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %} 
     <dt {% if current.slug == dashboard.slug %}class="active"{% endif %}> 
      <div>{{ dashboard.name }}</div> 
     </dt> 
     {% if current.slug == dashboard.slug %} 
     <dd> 
     {% else %} 
     <dd style="display:none;"> 
     {% endif %} 
     {% for heading, panels in panel_info.iteritems %} 
      {% with panels|has_permissions_on_list:user as filtered_panels %} 
      {% if filtered_panels %} 
      {% if heading %} 
      <div><h4><div>{{ heading }}</div></h4> 
      {% endif %} 
      <ul> 
      {% for panel in filtered_panels %} 
       <li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} >{{ panel.name }}</a></li> 
      {% endfor %} 
      </ul> 
      {% if heading %} 
       </div> 
      {% endif %} 
      {% endif %} 
      {% endwith %} 
     {% endfor %} 
     </dd> 
     {% endif %} 
    {% endif %} 
    {% endfor %} 
    </dl> 
</div> 

Answer 1

既然你說你想要菜單顯示當你盤旋它所用的區域，你應該試試這個。

.nav_accordion { 
    opacity: 0; 
} 

.nav_accordion:hover { 
    opacity: 1; 
} 

請務必刪除您的display: hidden;，因爲懸停不適用於隱藏的元素。

例子：https://jsfiddle.net/qx7c3p72/（將鼠標移動到結果窗口的左上角）

Answer 2

所以，你已經得到的代碼是缺失實際的行動，似乎在Javascript中編碼。

你應該使用這樣的：

.logo:hover .nav_accordion { 
    display: block; 
} 

的.logo選擇應該由實際的標誌類來代替。