Отменить переход дочернего элемента при наведении родительского элемента?

У меня есть меню, состоящее из подменю, а затем слайд-шоу (сделанное с помощью плагина bxslider), которое отображается при зависании над каким-либо конкретным подменю li. Слайд-шоу исчезает и исчезает, но когда я наводил новое подменю li после того, как слайд-шоу видимо, переходы перекрываются и мешают мне нависать над новым слайд-шоу. Можно ли отменить существующий переход css для слайд-шоу при наведении курсора на новое подменю li?Отменить переход дочернего элемента при наведении родительского элемента?

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/menu.css"> 
    <link rel="stylesheet" type="text/css" href="css/featured.css"> 
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="js/jquery.easing.1.3.js"></script> 
    <script src="js/jquery.fitvids.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script src="js/jquery.bxslider.min.js"></script> 
    <nav id="menu"> 
     <ul> 
      <li>  
       <a href="#">articles</a> 
       <div class="submenu"> 
       <ul> 
        <li> 
         <a href="#">diet</a> 
          <div class="featured" id="featuredDiet"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">history</a> 
          <div class="featured" id="featuredHistory"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">injuries</a> 
          <div class="featured" id="featuredInjuries"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">philosophies</a> 
          <div class="featured" id="featuredPhilosophies"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">physiology</a> 
          <div class="featured" id="featuredPhysiology"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">records</a> 
          <div class="featured" id="featuredRecords"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">schedules</a> 
          <div class="featured" id="featuredSchedules"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">training</a> 
          <div class="featured" id="featuredTraining"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
       </ul> 
       </div> 
      </li> 
      <li>  
       <a href="#">running news</a> 
       <div class="submenu"> 
       <ul> 
        <li> 
         <a href="#">youth</a> 
          <div class="featured" id="featuredYouth"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">high school</a> 
          <div class="featured" id="featuredHighschool"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">collegiate</a> 
          <div class="featured" id="featuredCollegiate"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">professional</a> 
          <div class="featured" id="featuredProfessional"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">masters</a> 
          <div class="featured" id="featuredMasters"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">ultra</a> 
          <div class="featured" id="featuredUltra"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
        <li> 
         <a href="#">trail</a> 
          <div class="featured" id="featuredTrail"> 
           <div class="bxslider"> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
            <div><a href="#"><img src="images/sample.jpg" title="." /></a> 
             <span class="featuredCaption">sample caption</span></div> 
           </div> 
          </div> 
        </li> 
       </ul> 
       </div> 
      </li> 
      <li><a href="#">coaching</a></li> 
      <li>  
       <a href="#">about</a> 
       <div class="submenu"> 
       <ul> 
        <li><a href="#">me</a></li> 
        <li><a href="#">training logs</a></li> 
        <li><a href="#">contact</a></li> 
       </ul> 
       </div> 
      </li> 
     </ul> 
    </nav> 
</head> 
<body> 
</body>

меню CSS:

#logo { 
    float: left; 
} 

#siteName { 
    position: absolute; 
    left: 26px; 
    top: 165px; 
    font-family: Helvetica; 
    font-size: 18px; 
} 

#menu ul { 
    display: inline-block; 
    position: absolute; 
    list-style: none; 
    width: 220px; 
} 

#menu ul a { 
    display: block; 
    padding-left: 18px; 
    padding-right: 10px; 
    color: black; 
    text-decoration: none; 
    font-size: 26px; 
    line-height: 36px; 
    font-family: Helvetica; 
    border-radius: 1px; 
    transition: margin-left 0.4s ease 0s, border-radius 0.4s ease 0s, background 0.4s ease 0s, color 1s ease 0s; 
} 

#menu ul li { 
    position: relative; 
    border-left: solid red .5px; 
} 

#menu li:hover > a { 
    background: black; 
    color: white; 
    border-radius: 7px; 
    margin-left: 15%; 
} 

#menu li:hover .submenu ul { 
    visibility: visible; 
} 

#menu ul ul { 
    visibility: hidden; 
    position: absolute; 
    left: 83%; 
    top: 0px; 
    width: 65%; 
    margin-left: 6%; 
    background: none; 
} 

#menu ul ul a { 
    line-height: 100%; 
    font-size: 18px; 
    padding: 8px; 
}

Рекомендуемые (слайд-шоу) CSS:

.featured { 
    visibility: hidden; 
    position: absolute; 
    left: 100%; 
    width: 728px; 
    height: 450px; 
    opacity: 0; 
    transition: all 2s ease 0s; 
} 

.featured .bxslider a { 
    padding: 0 !important; 
} 

.featured:after, .featured:before { 
    right: 99.5%; 
    border: solid transparent; 
    content: " "; 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    pointer-events: none; 
} 

.featured:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-right-color: black; 
    border-width: 13px; 
    margin-top: -13px; 
} 

.featured:before { 
    border-color: rgba(0, 0, 0, 0); 
    border-width: 17px; 
    border-right-color: white; 
    margin-top: -17px; 
} 

.submenu li:hover .featured { 
    visibility: visible; 
    opacity: 1; 
} 

.featuredCaption { 
    position: absolute; 
    color: #ffffff; 
    font-family: Helvetica; 
    font-size: 26px; 
    bottom: 0; 
    left: 0; 
    padding: 10px; 
    padding-left: 20px; 
    z-index: 20; 
} 

    /* ARTICLES */ 

#featuredDiet { 
    top: 0%; 
} 

#featuredDiet:after, #featuredDiet:before { 
    top: 4%; 
} 

#featuredHistory { 
    top: -100%; 
} 

#featuredHistory:after, #featuredHistory:before { 
    top: 11.5%; 
} 

#featuredInjuries { 
    top: -200%; 
} 

#featuredInjuries:after, #featuredInjuries:before { 
    top: 19%; 
} 

#featuredPhilosophies { 
    top: -300%; 
} 

#featuredPhilosophies:after, #featuredPhilosophies:before { 
    top: 26.5%; 
} 

#featuredPhysiology { 
    top: -400%; 
} 

#featuredPhysiology:after, #featuredPhysiology:before { 
    top: 34%; 
} 

#featuredRecords { 
    top: -500%; 
} 

#featuredRecords:after, #featuredRecords:before { 
    top: 41.5%; 
} 

#featuredSchedules { 
    top: -600%; 
} 

#featuredSchedules:after, #featuredSchedules:before { 
    top: 49%; 
} 

#featuredTraining { 
    top: -700%; 
} 

#featuredTraining:after, #featuredTraining:before { 
    top: 56.5%; 
} 

    /* RUNNING NEWS */ 

#featuredYouth { 
    top: -100%; 
} 

#featuredYouth:after, #featuredYouth:before { 
    top: 11.5%; 
} 

#featuredHighschool { 
    top: -200%; 
} 

#featuredHighschool:after, #featuredHighschool:before { 
    top: 19%; 
} 

#featuredCollegiate { 
    top: -300%; 
} 

#featuredCollegiate:after, #featuredCollegiate:before { 
    top: 26.5%; 
} 

#featuredProfessional { 
    top: -400%; 
} 

#featuredProfessional:after, #featuredProfessional:before { 
    top: 34%; 
} 

#featuredMasters { 
    top: -500%; 
} 

#featuredMasters:after, #featuredMasters:before { 
    top: 41.5%; 
} 

#featuredUltra { 
    top: -600%; 
} 

#featuredUltra:after, #featuredUltra:before { 
    top: 49%; 
} 

#featuredTrail { 
    top: -700%; 
} 

#featuredTrail:after, #featuredTrail:before { 
    top: 56.5%; 
}

источник

2015-05-12 Joseph Webster

Сократите свой код только соответствующие объекты. Разумеется, ваш код отслеживания аналитики не является частью проблемы. – briansol

@briansol подрезал его. –

Вы могли бы попытаться сделать все вручную, как это:

document.ready(fuction() { 
$('.element1').hover(fuction() { 
    $('.sideshow2, .slideshow3, .slideshow4').hide(); 
    $('.slideshow1').fadeIn(); 
}); 

$('.element2').hover(fuction() { 
    $('.sideshow1, .slideshow3, .slideshow4').hide(); 
    $('.slideshow2').fadeIn(); 
}); 

$('.element3').hover(fuction() { 
    $('.sideshow1, .slideshow2, .slideshow4').hide(); 
    $('.slideshow3').fadeIn(); 
}); 

$('.element4').hover(fuction() { 
    $('.sideshow1, .slideshow2, .slideshow3').hide(); 
    $('.slideshow4').fadeIn(); 
}); 
});

источник

2015-05-12 19:05:17

Это не сработало для меня. –

У вас уже есть JS? Если да, можете ли вы отредактировать свой пост и включить его в него? –

У меня пока нет. Я не уверен, как использовать JavaScript для осуществления моего перехода CSS. –

Отменить переход дочернего элемента при наведении родительского элемента?

ответ

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