我正在尝试自定义水平仪表板(openstack)。在仪表板中有一个Nov-accordians菜单(请参见下图),我想隐藏它并仅在鼠标悬停在菜单区域上时显示。这里nav_accordion是css类。 请告诉我在以下css文件中应添加哪些代码才能达到上述效果。
我只想在鼠标悬停时显示以下菜单。此菜单位于左上角
将鼠标悬停在菜单区域菜单上时,应显示
以下代码来自github openstack(icehouse)
的 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>
答案 0 :(得分:1)
由于您说当您将鼠标悬停在其所使用的区域时,您希望显示该菜单,您应该尝试这样做。
.nav_accordion {
opacity: 0;
}
.nav_accordion:hover {
opacity: 1;
}
请务必删除display: hidden;
,因为悬停不会适用于隐藏元素。
示例:https://jsfiddle.net/qx7c3p72/(将鼠标移动到结果窗口的左上角)
答案 1 :(得分:0)
所以,您获得的代码缺少实际操作,这似乎是用Javascript编写的。
你应该用这个:
.logo:hover .nav_accordion {
display: block;
}
.logo
选择器应替换为实际徽标类。