如何修复导航菜单上的悬停和过渡？

【问题标题】：How can I fix the hover and transition on my nav menu?如何修复导航菜单上的悬停和过渡？
【发布时间】：2015-12-12 10:27:09
【问题描述】：

我正在构建一个垂直选项卡式导航菜单。

当我将鼠标悬停在标签上时遇到两个问题。

首先，只有悬停的选项卡应该展开。但实际发生的是多个选项卡展开。

第二，展开过渡不流畅。这非常生涩和烦人。

我浏览了我的代码，但无法弄清楚。我错过了什么？

每个选项卡在悬停时都应平滑地自行展开。

我们将不胜感激。

现场直播：http://gearbags.com/store/shop/

HTML：

<!-- First Tab --> 

<div id="slideout">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />


    <div id="slideout_inner">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">ACCESSORIES</a></h4><br />
      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXFB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXGC-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXFGS</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXFGS-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>

<!-- Second Tab --> 

<div id="slideout-fire">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_fire">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">FIREFIGHTER</a></h4><br />
      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXFB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXGC-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXFGS</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXFGS-HD</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>


<!-- Third Tab --> 


<div id="slideout-medical">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_medical">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">MEDICAL</a></h4><br />

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMB5-HP</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfb30-accessories/">LXMB15</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgc-hd-accessories/">LXMB20</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-accessories/">LXMB30</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxfgs-hd/">LXMB35</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMB40</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMB50</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMB65</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-a/">LXMK-A</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-b/">LXMK-B</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-c/">LXMK-C</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-d/">LXMK-D</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/accessories/lxsmk-e/">LXMK-E</a></h4>

    </div>
  </div>

<!-- Fourth Tab --> 


<div id="slideout-tactical">

    <img src="http://i.imgur.com/Y4LMQhS.png" alt="tab" />



    <div id="slideout_inner_tactical">

      <h4><a href="http://gearbags.com/store/product-category/accessories/">TACTICAL</a></h4><br />

      <h4><a href="http://gearbags.com/store/product-category/tactical/lxpb10/">LXPB10</a></h4>

      <h4><a href="http://gearbags.com/store/product-category/tactical/lxpb40/">LXPB40</a></h4>


    </div>
  </div>

CSS

/* ---------- First Tab ---------- */


#slideout {
  position: fixed;
  top: 40px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout img {
  position: relative;
    left: 75px;
  /* margin-left: -860px; */
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner {
  position: fixed;
  top: 70px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner a {
  text-decoration: none;
  color: #5a5683;
}

#slideout:hover {
  /*left: 320px;*/
  /* left: 380px; */
    left: -155px;
}

#slideout:hover #slideout_inner {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner a:hover {
  color: #FF6824;
}



/* ---------- Second Tab ---------- */


#slideout-fire {
  position: fixed;
  top: 220px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-fire img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_fire {
  position: fixed;
  top: 250px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_fire a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-fire:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-fire:hover #slideout_inner_fire {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_fire a:hover {
  color: #FF6824;
}



/* ---------- Third Tab ---------- */


#slideout-medical {
  position: fixed;
  top: 400px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-medical img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_medical {
  position: fixed;
  top: 430px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_medical a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-medical:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-medical:hover #slideout_inner_medical {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_medical a:hover {
  color: #FF6824;
}


/* ---------- Fourth Tab ---------- */


#slideout-tactical {
  position: fixed;
  top: 580px;
  left: -500px;
  width: 500px;
  height: 140px;
  padding: 12px 0;
  text-align: center;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  z-index: 999;
}

#slideout-tactical img {
  position: relative;
  /* margin-left: -860px; */
    left: 75px;
  width: 500px;
  height: 200px;
  top: 0;
  z-index: 0;


/*
position: relative;
  margin-left: -430px;
  width: 500px;
  height: 200px;
  top: -58px;
  z-index: 0;*/
}

#slideout_inner_tactical {
  position: fixed;
  top: 600px;
  /*left: -300px;*/
  left: -250px;
  width: 400px;
  padding: 25px;
  height: 120px;
  line-height: 1.5em;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  z-index: 9999;
}

#slideout_inner_tactical a {
  text-decoration: none;
  color: #5a5683;
}

#slideout-tactical:hover {
  /*left: 320px;*/
  left: -115px;
}

#slideout-tactical:hover #slideout_inner_tactical {
  /*left: 35px;*/
  left: 125px;
}

.vertical-text {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.gbtitle {
  margin: 0px;
  padding: 0 100px;
  text-decoration: none;
  color: #5a5683;
  text-align: right;
  z-index: 1;
}

.gbtitle a {
  text-decoration: none;
  color: #5a5683;

}

.gbtitle a:hover {
  text-decoration: none;
  color: #FF6824;
}

#slideout_inner_tactical a:hover {
  color: #FF6824;
}

【问题讨论】：

    标签： html css navigation hover css-transitions


    【解决方案1】：

    当只有一个标签悬停时，导致多个标签展开的原因似乎是主标签容器 (#slideout-...) 的所有四个 #slideout_inner-... div 子级上的 width: 400px 声明。

    这个宽度覆盖的区域比它所属的选项卡大得多；它与其他选项卡重叠。在 Chrome 中进行测试时，如果您只是移除此宽度，重叠部分就会消失，并且宽度只会扩大到足以填充其内容。

    所以，第一步：删除上面引用的所有 div 子级上的 width: 400px。这似乎解决了悬停问题。过渡现在很顺利。但是内容现在已经从视图中消失了。

    要解决此问题，您需要调整相同的四个slideout_inner-... div 子项中的位置。

    尝试在每条规则中添加margin-left: 175px。

    您可能仍需要稍微调整定位，以使文本符合您的偏好。但我认为上述调整解决了您提出的两个问题。

    演示：http://jsfiddle.net/wf0658ko/1/

    【讨论】：

    • 谢谢！这似乎纠正了这个问题！我改变了每条规则的剩余边距。正如你提到的，我必须针对每个项目专门调整它。前两个是 125 像素，后两个是 140 像素。最后一件事要纠正的是，最上面的在悬停时将文本推得更远一些。现在要去工作了！谢谢！感谢您的帮助！
    【解决方案2】：

    关于你的transition;您正在使用 transition-duration 属性而没有设置实际的 transition。 将此速记属性添加到您的选项卡中，它应该可以解决您的问题： transition:all 0.5s ease-in-out; 侧面导航的功能很时髦，因为您的transforms 保持 450px 的宽度并覆盖了相邻的标签。

    附注：如果您不熟悉 Chrome Dev Tools，那么这是寻找问题答案的好地方（例如这些）。

    【讨论】：

      猜你喜欢
      • 2015-03-31
      • 2013-06-05
      • 2013-10-12
      • 2015-11-12
      • 2013-04-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-16
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode