javascript - 如何在初始状态下添加框并保持悬停状态？

Question

我希望第二个框悬停在“下载我们的移动应用程序”下，并且仍然希望悬停状态处于活动状态，以便我能够单击框中的链接，我被卡住了，请任何人帮助我.

body {
  background-color: #f5f5f5;
}


/* ======================START App Platforms===============================*/

header {
  position: relative;
}

header .left {
  float: left;
}

header .right {
  float: right;
}

header .platform-container {
  padding: 0 0 0 .5rem;
  transition: all .5s ease-in-out;
}

header .platform-container li {
  margin: 5px 0;
}

.platform-container:hover {
  background-color: #fff;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
  position: relative;
  z-index: 13;
  cursor: pointer;
}

header ul {
  eight: 30px;
}

header ul li {
  margin: 0 5px;
  display: inline-block;
  list-style: none;
}

header ul li i {
  vertical-align: middle;
  margin-right: 5px;
  font-size: 15px;
}

header ul>li>a,
header ul {
  color: #6C6C6C;
  text-decoration: none;
}

header ul li.mobile-links,
.mobile-links i {
  color: #08a95b !important;
  font-weight: 700;
}

header ul li.down-arrow i {
  display: inline-block;
  color: #bbb;
  font-size: 15px;
  margin-left: 5px;
}

header .app-platform {
  position: absolute;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
  width: 223.5px;
  background-color: #fff;
  left: 0;
  z-index: 12;
  color: #333;
  font-size: 14px;
  cursor: default;
  padding: 5px 0;
  display: none;
}

header .platform-container:hover+.app-platform {
  display: block;
}

header .mobile-app-link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

header .mobile-app-link ul {
  padding: 0;
}

header .mobile-app-link a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

header .mobile-app-link i {
  margin: 0 auto;
}

header .mobile-app-link a span {
  color: #0095DA!important;
  font-size: 14px;
  font-weight: 400;
  margin: 10px auto;
}

header .mobile-app-container p {
  font-size: 12px;
  font-style: italic;
  padding: 0 5px;
  text-align: center;
}


/* ======================END App Platforms===============================*/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <ul class="left platform-container">
    <li class="mobile-links">
      <i style="font-size: 20px" class="fa fa-mobile-phone"></i>Download our Mobile App
    </li>
    <li class="down-arrow">
      <i class="fa fa-caret-down"></i>
    </li>
  </ul>

  <div class="app-platform">
    <div class="mobile-app-container">
      <div class="mobile-app-link">
        <ul>
          <li>
            <a href="#" target="_blank">
              <i style="font-size: 48px;" class="fa fa-android"></i>
              <span class="platform">Android</span>
            </a>
          </li>
        </ul>
        <ul>
          <li>
            <a href="#" target="_blank">
              <i style="font-size: 48px;" class="fa fa-apple"></i>
              <span class="platform">iOS</span>
            </a>
          </li>
        </ul>
      </div>
      <p>Téléchargez-la maintenant!</p>
    </div>
  </div>
</header>

标签： javascripthtmljquerycss

Answer 1

我们需要将您的.platform-container和包装.app-platform到一个容器中。然后在该容器上将其设置position为relative并添加hover事件样式。

.nav-wrapper {
   position: relative;
}

.nav-wrapper:hover .app-platform {
    display: block;
}

完成所有设置后，我们现在需要.app-platform在显示时为您设置正确的位置。

header .app-platform {
    position: absolute;
    top: 100%;
}

body {
  background-color: #f5f5f5;
}


/* ======================START App Platforms===============================*/

header {
  position: relative;
}

header .left {
  float: left;
}

header .right {
  float: right;
}

header .platform-container {
  padding: 0 0 0 0.5rem;
  transition: all 0.5s ease-in-out;
}

header .platform-container li {
  margin: 5px 0;
}

.platform-container:hover {
  /* background-color: #fff;
        -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
          5px 0 20px -5px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
          5px 0 20px -5px rgba(0, 0, 0, 0.3);
        box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
          5px 0 20px -5px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 13;
        cursor: pointer; */
}

header ul {
  /* height: 30px; */
}

header ul li {
  margin: 0 5px;
  display: inline-block;
  list-style: none;
}

header ul li i {
  vertical-align: middle;
  margin-right: 5px;
  font-size: 15px;
}

header ul>li>a,
header ul {
  color: #6c6c6c;
  text-decoration: none;
}

header ul li.mobile-links,
.mobile-links i {
  color: #08a95b !important;
  font-weight: 700;
}

header ul li.down-arrow i {
  display: inline-block;
  color: #bbb;
  font-size: 15px;
  margin-left: 5px;
}

header .app-platform {
  position: absolute;
  top: 100%;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  width: 223.5px;
  background-color: #fff;
  left: 0;
  z-index: 12;
  color: #333;
  font-size: 14px;
  cursor: default;
  padding: 5px 0;
  display: none;
}

header .mobile-app-link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

header .mobile-app-link ul {
  padding: 0;
}

header .mobile-app-link a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

header .mobile-app-link i {
  margin: 0 auto;
}

header .mobile-app-link a span {
  color: #0095da !important;
  font-size: 14px;
  font-weight: 400;
  margin: 10px auto;
}

header .mobile-app-container p {
  font-size: 12px;
  font-style: italic;
  padding: 0 5px;
  text-align: center;
}

.nav-wrapper {
  position: relative;
}

.platform-container {
  margin: 0;
}

.nav-wrapper:hover .app-platform {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<header>
  <div class="nav-wrapper left">
    <ul class="platform-container">
      <li class="mobile-links">
        <i style="font-size: 20px;" class="fa fa-mobile-phone"></i>Download our Mobile App
      </li>
      <li class="down-arrow">
        <i class="fa fa-caret-down"></i>
      </li>
    </ul>

    <div class="app-platform">
      <div class="mobile-app-container">
        <div class="mobile-app-link">
          <ul>
            <li>
              <a href="#" target="_blank">
                <i style="font-size: 48px;" class="fa fa-android"></i>
                <span class="platform">Android</span>
              </a>
            </li>
          </ul>
          <ul>
            <li>
              <a href="#" target="_blank">
                <i style="font-size: 48px;" class="fa fa-apple"></i>
                <span class="platform">iOS</span>
              </a>
            </li>
          </ul>
        </div>
        <p>Téléchargez-la maintenant!</p>
      </div>
    </div>
  </div>
</header>