Как показать меню только при наведении мышки?

Я пытаюсь настроить приборную панель горизонта ( 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>
Источник

2 ответа

Решение

Поскольку вы говорите, что хотите, чтобы меню отображалось при наведении на область, в которой оно находится, попробуйте это.

 .nav_accordion {
    opacity: 0;
 }

 .nav_accordion:hover {
   opacity: 1;
 }

Обязательно удалите свой display: hidden; потому что наведение не будет применяться к скрытым элементам.

Пример: https://jsfiddle.net/qx7c3p72/ (переместите указатель мыши в верхний левый угол окна результатов)

Источник

Итак, в вашем коде отсутствует реальное действие, которое, похоже, закодировано в Javascript.

Вы должны использовать это:

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

.logo селектор должен быть заменен реальным логотипом класса.

Источник
Другие вопросы по тегам