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

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

1 个答案: