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

标签 html css navigation hover css-transitions

我正在构建一个垂直标签式导航菜单。

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

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

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

我已经检查了我的代码，但无法弄清楚。我错过了什么？

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

如有任何反馈，我们将不胜感激。

实时站点: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;
}

最佳答案

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

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

因此，第一步:删除上面提到的所有 div 子元素的 width: 400px。这似乎解决了悬停问题。过渡现在很顺利。但是内容现在从 View 中消失了。

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

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

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

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

关于html - 如何修复导航菜单上的悬停和过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32598357/

上一篇：当我向下滚动时，Jquery 在 div 中淡出

下一篇：javascript - 鼠标滚轮和过渡不兼容

相关文章：

javascript - 将刻度转换为时间格式 (hh :mm:ss)

navigation - 使用自定义 costmap2d 层作为插件时，RVIZ 中“未收到 map ”

html - 文本作为多级 CSS 导航中的列表项

javascript - 删除行并提交空指针异常后使用javascript的struts2动态html表

javascript - 输入类型按钮在按下时会改变颜色？

javascript - 如何在其中保留 div 的文本，如果更大，则 div 向下扩展？

css - 为 web 无情地压缩大图像？

CSS继承和覆盖它

javascript - 设置overflow-y滚动条的样式

Android:抽屉导航标题 TextView 未以编程方式设置

©2024 IT工具网  联系我们