当孩子被绝对定位时父母上的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事件

回答

相关问题