如何在鼠标远离触发元素时使下拉内容保持打开状态

Question

因此，连续有三个按钮，当一个按钮悬停时，它会打开下拉内容，该内容位于图片中所示的所有三个按钮下。 但是，当鼠标向下移动到内容时，它会消失。 无法在里面发布图片**

尝试将下拉内容移动到相同的div中，但是我无法使内容占用整个底部空间。 如果问题没有意义，我可能需要重建一切对不起

 class DropDown { constructor() { // Cards this.serveCard = $('#serve-card'); this.protectCard = $('.protect-card'); this.commercialCard = $('#commercial-card'); // DropDown Area for Cards this.dropServe = $('#serve-card-dropdown'); this.dropProtect = $('#protect-card-dropdown'); this.dropCommercial = $('#commercial-card-dropdown'); // Drop Down Container this.dropDownContainer = $('#drop_down_container'); this.events(); } events() { this.protectCard.hover(this.dropDownIn.bind(this.dropProtect), this.dropDownOut.bind(this.dropProtect)); this.serveCard.hover(this.dropDownIn.bind(this.dropServe), this.dropDownOut.bind(this.dropServe).bind(this)); this.commercialCard.hover(this.dropDownIn.bind(this.dropCommercial), this.dropDownOut.bind(this.dropCommercial)); // Style Cards On Hover this.protectCard.hover(this.styleCard.bind(this.protectCard), this.styleCard.bind(this.protectCard)); this.serveCard.hover(this.styleCard.bind(this.serveCard), this.styleCard.bind(this.serveCard)); this.commercialCard.hover(this.styleCard.bind(this.commercialCard), this.styleCard.bind(this.commercialCard)); } dropDownIn() { this.removeClass('inactive'); } dropDownOut() { this.addClass('inactive'); } styleCard() { this.toggleClass('inactive'); } } 

 /* Drop down Menu --------- */ .blue_card { border: 2px solid white; margin: 0px 1% 0 1%; padding-top: 25px; background-color: rgb(0, 119, 204); color: white; border-bottom: none; } .blue_card.inactive { background-color: rgba(88, 128, 155, 0.424); border-bottom: none; } .drop-down-cont { position: relative; } .drop-down { background-color: rgb(0, 119, 204); margin-right: 10px; margin-left: 1%; position: absolute; top: 0; height: 100px; width: 98%; transition: height 500ms; border-right: 2px solid white; border-left: 2px solid white; border-top: 2px solid white; border-bottom: 2px solid white; color: white; } .drop-down.inactive { height: 0; transition: height 500ms; font-size: 0; border-bottom: none; border-top: none; } 

 <div class="row blue-card-cont"> <div id='protect-card' class="protect-card col blue_card inactive"> <h5>PROTECT</h5> <p>PROTECT WITH COPYRIGHT</p> </div> <div id='serve-card' class="col blue_card inactive"> <h5>SERVE</h5> <p>PROTECT DATA ENTRY. KILL THREATS</p> </div> <div id='commercial-card' class="col blue_card inactive"> <h5>COMMERCIALISE</h5> <p>CREATE NEW BUSINESS</p> </div> </div> <div id='#drop_down_container' class="drop-down-cont"> <div id='protect-card-dropdown' class="drop-down inactive"> <p>Protect</p> </div> <div id='serve-card-dropdown' class="drop-down inactive"> <p>Serve</p> </div> <div id='commercial-card-dropdown' class="drop-down inactive"> <p>Commercial</p> </div> </div> 

Answer 1

使用像这样的简单的CSS下拉菜单用CSS解决！ 下拉菜单