Mouseenter-Ereignis bei Eltern, wenn ein Kind absolut positioniert ist

Question

Ich versuche, ein einfaches Dropdown-Menü zu erstellen, das bei Hover-Ereignis über ein Element ausgelöst wird und so lange aktiv bleibt, wie der Cursor über diesem Element ist oder ist über die Dropdown-Liste.

Beispielcode:

HTML

<div class="header"> 
    <div class="items"> 
    <div class="item"> 
     <span>Caption</span> 
    </div> 
    <ul class="items_hidden"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </ul> 
    </div> 
</div> 
<input type="text"> 

CSS

.items { 
    float: right; 
    position: relative; 
} 
.item { 
    text-align: right; 
} 
.items_hidden { 
    display: none; 
    margin-top: 7px; 
    list-style: none; 
    z-index: 2000; 
    width: 80px; 
    border: 1px solid #f2f2f2; 
    text-align: left; 
    padding: 10px; 
    color: #333; 
    line-height: 30px; 
    border-bottom: 3px solid #f2f2f2; 

} 

input { 
    width: 100%; 
} 

JS

$(function() { 
    $('.items').on('mouseenter', function(e) { 
     $('.items_hidden').show(); 
    }); 

    $('.items').on('mouseleave', function(e) { 
     $('.items_hidden').hide(); 
    }); 

}); 

Ich habe, dass die Arbeit, wenn die Dropdown-Liste relativ positioniert ist, aber die Problem ist einmal das l Wird angezeigt, werden alle folgenden Inhalte nach unten verschoben. Hier

ein Beispiel: https://jsfiddle.net/2ya06aLo/

Eine andere Möglichkeit wäre es, die Liste absolut zu positionieren, so dass er sich nicht auf den Inhalt unten beeinflussen würde. Aber in diesem Fall verschwindet die Liste als soons, wenn ich den Cursor aus 'Caption' (im Gegensatz zur ersten Geige) entferne.

Hier ist das zweite Beispiel https://jsfiddle.net/8L6ojqLm/

Was für eine Lösung wäre die Liste verhält sich wie in 1 und zugleich machen Sie nicht den Rest des Inhalts wie in 2 beeinflussen?

Answer 1

Sie können JS nicht verwenden

Beispiel

.items { 
 
    float: right; 
 
    position: relative; 
 
} 
 
.item { 
 
    text-align: right; 
 
\t padding: 10px; 
 
} 
 
.items_hidden { 
 
    position: absolute; 
 
    right: 0; 
 
\t top: 20px; 
 
    display: none; 
 
    margin-top: 7px; 
 
    list-style: none; 
 
    z-index: 2000; 
 
    width: 80px; 
 
    border: 1px solid #f2f2f2; 
 
    text-align: left; 
 
    padding: 10px; 
 
    color: #333; 
 
    line-height: 30px; 
 
    border-bottom: 3px solid #f2f2f2; 
 

 
} 
 

 
input { 
 
    width: 100%; 
 
} 
 

 
.items:hover .items_hidden{ 
 
\t display: block; 
 
}

<div class="header"> 
 
<div class="items"> 
 
    <div class="item"> 
 
     <span>Caption</span> 
 
    </div> 
 
    <ul class="items_hidden"> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
    </ul> 
 
    
 
</div> 
 
</div> 
 
<input type="text">

Live-JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/

Answer 2

Konnte es nicht über reines CSS getan werden?

https://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 3

Vielleicht würde dies helfen.

.navigation { 
 
    width: 100%; 
 
} 
 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.mainmenu a { 
 
} 
 
.mainmenu a:hover { 
 
    background-color: #D90000; 
 
} 
 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 400px; 
 
} 
 
.submenu{ 
 
    max-height: 400px; 
 
} 
 
.submenu a { 
 
    background-color: #FF4D4D; 
 
} 
 
.submenu a:hover { 
 
    background-color: #D90000; 
 
} 
 
.submenu{ 
 
    overflow:hidden; 
 
    display:none; 
 
}

<nav class="navigation"><!-- pocetak navigacije --> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Link</a></li> 
 
    <li class="start"><a href="#ar">Link</a> 
 
     
 
     <ul class="submenu"> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     <li><a href="">Link</a></li> 
 
     </ul> 
 
     
 
    </li> 
 
\t <li><a href="">Home</a></li> 
 
\t </ul> 
 
</nav>

Answer 4

Um den Kommentar von CBroe zu nehmen: Das Problem der "Lücke" zwischen dem und dem Element zu sein scheint. Um es zu entfernen Sie können entweder

1. den „item“ geben eine Höhe -Richtcharakteristik, so dass es „greift nach unten“ auf die ul-Element oder
2. oder entfernen Sie die margin-top des ul-Element