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

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 下拉菜单 Solved with CSS! Dropdown Menus