отображение изменений руины непрозрачность переход

Я хочу иметь подменю, которое является невидимым и становится видимым, когда родительское меню в hower. Обратите внимание, что я не хочу, чтобы подменю становилось видимым, когда мышь переместится над местом, в котором должно быть подменю. В этом случае я хочу, чтобы подменю aaaa, bbbb, cccc и dddd становились видимыми, когда мышь переходит через меню «menu». Но я не могу добиться этого, так как изменение отображения разрушает переходы. Вот мой HTML:отображение изменений руины непрозрачность переход

<body> 
    <nav class="gnb" dir="rtl"> 
     <ul class="gnb"> 
      <li class="gnb"> <a class="gnb" href="../products/products.html">menu</a> 

       <ul class="sub-constructibles"> 
        <li class="gnb"><a class="gnb" href="#">aaaa</a> 

        </li> 
        <li class="gnb"><a class="gnb" href="#">bbbb</a> 

        </li> 
        <li class="gnb"><a class="gnb" href="#">cccc</a> 

        </li> 
        <li class="gnb"><a class="gnb" href="#">dddd</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </nav> 
</body>

А вот мой CSS:

* { 
    transition: all .4s; 
} 
nav.gnb { 
    background-color: #0f7f07; 
} 
li.gnb { 
    display:inline-block; 
} 
li.gnb:hover { 
    background-color: #20ca05; 
} 
ul.sub-constructibles { 
    opacity:0; 
    visibility:hidden; 
    position: absolute; 
    background-color: #20ca05; 
} 
li.gnb:hover ul.sub-constructibles { 
    opacity:.9; 
    visibility:visible; 
} 
a.gnb { 
    display:inline-block; 
}

И вот моя скрипка: https://jsfiddle.net/e4h0bccy/

я также попытался изменить видимость вместо дисплея, но это Безразлично Работы bc Подменю становятся видимыми также, когда мышь переходит в прежнее место.

источник

2015-11-28 yukashima huksay

Я считаю, что вы не можете сделать это на CSS, но в JS вы можете наверняка –

У вас есть повторяющиеся идентификаторы. Никогда не повторяйте идентификаторы. –

@MrLister спасибо, я исправил его, но это не проблема, потому что в css не использовались идентификаторы. –

Ваше решение должно установить display: block и visibility: hidden в подменю. Посмотрите:

https://jsfiddle.net/e4h0bccy/2/

ul.sub-constructibles { 
    opacity:0; 
    display:block; 
    position: absolute; 
    background-color: #20ca05; 
    visibility: hidden; 
}

С непрозрачности устанавливается равным нулю, то нет никаких проблем, потому что меню не отображается, пока вы не колебались.

Отрывок:

* { 
 
    transition: all .4s; 
 
} 
 
nav.gnb { 
 
    background-color: #0f7f07; 
 
} 
 
li.gnb { 
 
    display:inline-block; 
 
} 
 
li.gnb:hover { 
 
    background-color: #20ca05; 
 
} 
 
ul.sub-constructibles { 
 
    opacity:0; 
 
    display:block; 
 
    position: absolute; 
 
    background-color: #20ca05; 
 
    visibility: hidden; 
 
} 
 
li.gnb:hover ul.sub-constructibles { 
 
    display:block; 
 
    opacity:.9; 
 
    visibility: visible; 
 
} 
 
a.gnb { 
 
    display:inline-block; 
 
}

<body> 
 
    <nav class="gnb" dir="rtl"> 
 
     <ul class="gnb"> 
 
      <li class="gnb" id="constructibles"> <a class="gnb" id="constructibles" href="../products/products.html">menu</a> 
 

 
       <ul class="sub-constructibles"> 
 
        <li class="gnb"><a class="gnb" href="#">aaaa</a> 
 

 
        </li> 
 
        <li class="gnb"><a class="gnb" href="#">bbbb</a> 
 

 
        </li> 
 
        <li class="gnb"><a class="gnb" href="#">cccc</a> 
 

 
        </li> 
 
        <li class="gnb"><a class="gnb" href="#">dddd</a> 
 

 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
</body>

источник

2015-11-28 16:29:16

Да, но когда курсор переместится через свое место, он появляется, пока он не должен! –

Нет! Это не так. См. Рабочий фрагмент. –

Отображается, только если вы наведете слово 'Меню' –

отображение изменений руины непрозрачность переход

ответ

Смежные вопросы