Есть ли способ ограничить область зависания свойства в CSS?

Я создал несколько вкладок, которые выдвигаются при наведении только с CSS и HTML. Я сталкиваюсь с некоторыми проблемами с положением и чувствительностью. Я знаю, что могу немного побороть чувствительность со скоростью перехода, но кажется, что, когда я нахожусь в пространстве, которое не находится на вкладке, эта вкладка выскочит. В частности, если я попытаюсь получить доступ к фильтру цены или любой из категорий на боковой панели. Я хотел бы ограничить действие только для вызова, как только моя мышка зависает над фактической вкладкой. Вы можете видеть, что я пишу о here Есть ли способ исправить эту проблему, чтобы я мог получить доступ к другим элементам страницы и правильно ли работать с вкладками одновременно?Есть ли способ ограничить область зависания свойства в CSS?

Как быстро Примечание: Все вкладки имеют одинаковый дизайн, с исключения позиционирования, так что вы можете просто посмотреть на коде первого элемента.

Вот 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; 
}

источник

2015-09-15 jshuadvd

У вас есть много позиционирования и отрицательных полей, происходящих в этих ползунков.

Следующее решение работает при тестировании в Chrome.

сделать следующие корректировки в существующие правила CSS:

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

... и повторять в течение трех последующих вкладок.

ДЕМО: http://jsfiddle.net/dxvc08nk/

источник

2015-09-15 21:04:59

Спасибо! Кажется, это исправить эту проблему. Любая идея, что я могу сделать, чтобы исправить раздумию ползунков, когда они парят, чтобы они не были такими рывками, и переход стал более плавным? – jshuadvd

Да, я просто изучал это. Мой ответ был посвящен конкретной проблеме, возникшей в вашем вопросе. Другие виды поведения (рывок и быстрые переходы) могут быть отдельными проблемами. –

Нажмите на «просмотр демо» на этой странице: [Beautiful Slide Out Navigation] (http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery- tutorial /) –

Есть ли способ ограничить область зависания свойства в CSS?

ответ

Смежные вопросы