有没有办法限制属性在CSS中的悬停区域？

Question

我创建了一些选项卡，这些选项卡仅在 CSS 和 HTML 悬停时滑出。我运行遇到悬停位置和灵敏度的一些问题。我知道我可以通过转换速度在某种程度上降低灵敏度，但似乎当我将鼠标悬停在不在选项卡上的 space 中时，该选项卡会弹出。特别是如果我尝试访问价格过滤器或侧边栏中的任何类别。我想将操作限制为仅在我的鼠标悬停在实际选项卡上时才调用。您可以看到我在写什么 here 有没有办法更正此问题，以便我仍然可以访问页面的其他元素并同时使选项卡正常工作？

As a quick note: All of the tabs have the same styling, with the exception of the positioning, so you can just look at the code of the first element.

这里是 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: 0;
  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;
  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;
}

#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: 0;
  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;
  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: 380px;
}

#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: 0;
  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;
  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: 380px;
}

#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: 0;
  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;
  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: 380px;
}

#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;
}

Answer 1

您在这些滑块中有很多定位和负边距。

以下解决方案在 Chrome 测试中有效。

对您现有的 CSS 规则进行以下调整：

#slideout { left: -500px; }
#slideout img { left: 75px; } /* AND REMOVE { margin-left: -860px; } */
#slideout:hover { left: -115px; }

... 并重复三个后续选项卡。

演示：http://jsfiddle.net/dxvc08nk/

有没有办法限制属性在CSS中的悬停区域？

Is there any way to limit the hover region of a property in CSS?

html

css

hover