<style type="text/css">
    #parent:hover #abc{
        display: block ;
    }
</style>

: Hover в этом не работает Следующий код был использован. Всякий раз, когда указатель мыши находится над #parent, должен отображаться #abc. Но этого не происходит.

<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
    <li class="w3-bar-item w3-button">Link1 </li>
    <li class="w3-bar-item w3-button">Link1</li>
    <li class="w3-bar-item w3-button">Link1</li>
</ul>

Пожалуйста, кто-нибудь может разобраться в проблеме.

РЕДАКТИРОВАТЬ: весь код

 <div class="w3-dropdown-hover" style="width: 50%;">
    <button class="w3-button">SomeButton</button>
    <div class="w3-bar-block w3-black w3-dropdown-content   " id="xyz" style="width: 100px; ">
        <a class="w3-bar-item w3-button">LIK1</a>
        <div style="margin:0px; padding: 0px; position: relative;" id="parent">
            <a class="w3-bar-item w3-button">LIK2</a>
            <ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
            </ul>
        </div>      
        <a class="w3-bar-item w3-button">LIN3</a>
    </div>
</div>
1
Prajval M 19 Окт 2017 в 08:08

3 ответа

Лучший ответ

Поскольку вы устанавливаете встроенный стиль для #abc и никогда не позволяете устанавливать другой стиль в голове, вы должны установить стиль #abc в голове, например так:

Css:

    <style type="text/css">
    #abc {
        list-style-type: none;
        margin: 0px;
        margin-left: 100px;
        position: absolute;
        top: 0px;
        padding: 0px;
        background-color: green;
        display: none;
    }

    div#parent:hover > ul#abc {
        display: block;
    }
</style>

Html:

<div id="parent">
    <a class="w3-bar-item w3-button">LIK2</a>
    <ul id="abc" class="w3-bar-block">
        <li class="w3-bar-item w3-button">Link1 </li>
        <li class="w3-bar-item w3-button">Link1</li>
        <li class="w3-bar-item w3-button">Link1</li>
    </ul>
</div>
1
Sajad Bagherzadeh 19 Окт 2017 в 05:26

Используйте селектор брата adjacent (+) или селектор брата general (~), чтобы выбрать братьев и сестер. Проверьте ниже фрагмент для справки. Проверьте здесь для получения дополнительной информации о селекторах Combinators.

#parent:hover ~#abc{
  display: block !important;  
}
<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
  <li class="w3-bar-item w3-button">Link1 </li>
  <li class="w3-bar-item w3-button">Link1</li>
  <li class="w3-bar-item w3-button">Link1</li>
</ul>
1
RaJesh RiJo 19 Окт 2017 в 05:23

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

li:hover ul{
  display: block !important;  
}
<ul style="" id="abc" class="w3-bar-block">
<li>
LIK2<br>
        <ul id="inner" style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none">

          <li class="w3-bar-item w3-button">Link1 </li>
          <li class="w3-bar-item w3-button">Link1</li>

          <li class="w3-bar-item w3-button">Link1</li>
        </ul>  
  </li>
</ul>

Надеюсь это поможет

1
Irony Stack 19 Окт 2017 в 05:38