當孩子被絕對定位時父母上的mouseenter事件

我打算做一個簡單的下拉菜單，它會在某個元素上的懸停事件觸發，並保持活動狀態，只要光標位於該元素上或在下拉列表中。當孩子被絕對定位時父母上的mouseenter事件

示例代碼：

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%; 
}

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

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

});

我得到了工作，在下拉列表中的相對位置，但問題一度是l ist被顯示，它導致所有下面的內容向下移動。

下面是一個例子：https://jsfiddle.net/2ya06aLo/

另一種方式是定位列表絕對的，所以它不會影響下面的內容。但是在這種情況下，當我將光標移出'Caption'時（與第一個小提琴相反），這個列表會消失。

這裏是第二個例子https://jsfiddle.net/8L6ojqLm/

會是怎樣的解決方案，以使列表的行爲就像1，並在同一時間不會在2影響的其餘內容是怎樣的？

來源

2017-03-06 Vladislav

的原因，這並不具有絕對的定位工作是你離開這兩個元素之間的差距，使鼠標光標不能從「標題」元素傳遞給下拉元素直接。給他們兩個背景顏色，看看我的意思。然後，消除這個差距來解決問題。 – CBroe

@CBroe幫助，謝謝。 – Vladislav

你可以不使用JS

例

.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">

直播的jsfiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/

來源

2017-03-06 12:25:58 grinmax

不能通過純CSS完成嗎？

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

來源

2017-03-06 12:12:10

也許這會有所幫助。

.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>

來源

2017-03-06 12:19:41

佔用CBroe的評論：這個問題似乎是與元素之間的「差距」。要刪除它，你既可以

帶來的「項目」 - 元素的高度，使其「達到降」的UL-元素或
或刪除UL元素的上邊距

來源

2017-03-06 12:21:16 jfrehner

當孩子被絕對定位時父母上的mouseenter事件

回答

相關問題