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

时间：2020-08-09 02:27:32

标签： javascript html jquery css

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

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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

这是我对使用JS的看法：

const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");

platformContainerLi.onmouseover = function() {
  appPlatform.style.display = 'block';
};

mobileAppContainer.onmouseover = function() {
  appPlatform.style.display = 'block';
};

mobileAppContainer.onmouseout = function() {
  appPlatform.style.display = 'none';
};

示例： 

const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");

platformContainerLi.onmouseover = function() {
  appPlatform.style.display = 'block';
};

mobileAppContainer.onmouseover = function() {
  appPlatform.style.display = 'block';
};

mobileAppContainer.onmouseout = function() {
  appPlatform.style.display = 'none';
};
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 {
  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;
  -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>

如果您想将图标保持在条形下方，只需调整z-index：

platformContainerLi.onmouseover = function() {
  appPlatform.style.display = 'block';
   appPlatform.style.zIndex = '-1';
};

mobileAppContainer.onmouseover = function() {
  appPlatform.style.display = 'block';
   appPlatform.style.zIndex = '-1';
};

mobileAppContainer.onmouseout = function() {
  appPlatform.style.display = 'none';
  appPlatform.style.zIndex = '';
};
相关问题
最新问题