1. дома
  2. Вопрос и ответ
  3. Переход CSS не работает на вложенные элементы

Переход CSS не работает на вложенные элементы

2016-02-16 2 views
4

Мой переход не относится к подменю <a>. Изменение цвета преуспевает, но переход не срабатывает при наведении. Если я применяю те же правила, то к другому элементу с основным классом он работает хорошо. Проблема заключается в вложенных элементах или подклассах/селекторах CSS. Есть идеи?Переход CSS не работает на вложенные элементы

У меня есть следующий HTML, структура JS & CSS:

$(document).ready(function() { \t 
 
\t $('.menu_container').mouseover(function(e) { 
 
    \t $('ul', this).show(); 
 
}); 
 
\t $('.menu_container').mouseout(function(e) { 
 
    \t $('ul', this).hide(); 
 
}); 
 
});
.menu    { background:#f8f8f8; color:#707070; text-align:center; } 
 
.menu li   { margin-bottom:0 } 
 
.menu li   { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; } 
 
.menu li:hover  { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;} 
 
.menu li a   { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; } 
 
.menu li a:hover { color:#06a7ea; } 
 
.menu li span  { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; } 
 
.menu li span:hover { color:#06a7ea; } 
 
.menu li.menu_container   { position:relative; display:inline-table; } 
 
.menu li.menu_container ul  { display:none; position:absolute; top:51px; left:0; background:#022a3b; padding-left:0; padding:5px; } 
 
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; } 
 
.menu li.menu_container ul li a  { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; } 
 
.menu li.menu_container ul li a:hover { color:#FF0000; }
<nav class="container-fluid menu"> 
 
    <ul> 
 
     <li><a href="/">Home</a></li> 
 
     <li><a href="/">Home</a></li> 
 
     <li class="menu_container"> 
 
      <span>Home 
 
       <ul> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
       </ul> 
 
      </span> 
 
     </li> 
 
    </ul> 
 
</nav>

Живой пример: http://thyalie.ro/casedevanzareoradea/

источник

2016-02-16 Szabó Sándor István

+0

Единственный переход я вижу (кроме 'color' один) является' переходов: Левое поле 2s; ', и он не получает изменен любой другой декларации стиля, поэтому имеет смысл, что никаких других переходов не происходит. – somethinghere

+0

О, я забыл, удаляю переход от .menu li.menu_container ul li. Во всяком случае, я попробовал оба творения, но безуспешно. Я нашел что-то: если я поставлю display: block в подменю, переход работает! Но это не решение. Мое меню должно быть скрыто, а с помощью JQuery show() hide() я меняю дисплей –

+0

Не могли бы вы просто рассказать, какой переход вы сейчас говорите? Я не вижу проблемы. – somethinghere

ответ

1

Используйте JQuery в mouseenter и mouseleave события, а не mouseover и mouseout.

mouseover и mouseout огонь каждый раз, когда вы наведите указатель на один элемент на другой в течение .menu_container. Поэтому при наведении курсора из одного элемента в подменю подменю ul встроенный стиль быстро изменяется с display: none до display: block. Это приводит к тому, что переход по ссылкам не вступает в силу.

This jQuery page имеет хороший пример различий между событиями.

$(document).ready(function() { \t 
 
\t $('.menu_container').mouseenter(function(e) { 
 
    \t $('ul', this).show(); 
 
}); 
 
\t $('.menu_container').mouseleave(function(e) { 
 
    \t $('ul', this).hide(); 
 
}); 
 
});
.menu    { background:#f8f8f8; color:#707070; text-align:center; } 
 
.menu li   { margin-bottom:0 } 
 
.menu li   { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; } 
 
.menu li:hover  { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;} 
 
.menu li a   { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; } 
 
.menu li a:hover { color:#06a7ea; } 
 
.menu li span  { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; } 
 
.menu li span:hover { color:#06a7ea; } 
 
.menu li.menu_container   { position:relative; display:inline-table; } 
 
.menu li.menu_container ul  { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; } 
 
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; } 
 
.menu li.menu_container ul li a  { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; } 
 
.menu li.menu_container ul li a:hover { color:#FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="container-fluid menu"> 
 
    <ul> 
 
     <li><a href="/">Home</a></li> 
 
     <li><a href="/">Home</a></li> 
 
     <li class="menu_container"> 
 
      <span>Home 
 
       <ul> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
       </ul> 
 
      </span> 
 
     </li> 
 
    </ul> 
 
</nav>

источник

2016-02-16 17:15:08

+0

Согласен, есть более эффективные способы реализации раскрывающегося меню навигации. Но я отвечаю на вопрос OP о том, почему его переход не работает. Спасибо –

+1

Спасибо, теперь он работает! Ответ на что-то более элегантный, но ваш вопрос определенно ответил на вопрос. Спасибо! –

-1

Добавить

transition: color 2s;

к

.menu li.menu_container ul li a:hover

источник

2016-02-16 16:35:26

+0

Мой плохой @somethinghere - немного грубый, но что угодно. Нужно обновить мою консоль, запутанную js. Таким образом, здесь вышесказанное, как вы упомянули, неверно, ошибка возникает из '\t $ ('. Mobil-menu-button'). Click (function (e) { \t $ ('. Menu_ul'). Toggle(); }); 'в файле js, поскольку его борьба с другими 2 вызывает' hide' и 'show'. Надеюсь, это прояснится. Ta. –

+0

Удалите или переформатируйте переключатель, чтобы решить проблему. –

+0

Извините, но это не только то, что ответ не работает, он также опубликован с минимальным количеством объяснений, насколько это возможно. Опубликуйте то, что вы прокомментировали здесь здесь, как полноценный пост с небольшим количеством объяснений относительно того, что происходит и как его исправить, и я буду смягчать и продвигать его снова (и, вы знаете, проглотите мою гордость). Я только имел в виду, что никакие объяснительные решения с «сделай это» на самом деле не помогают никому учиться и разбираться. Он фиксирует вещи, но, в конце концов, не помогает. – somethinghere

1

Ваш Javascript, кажется, мешая отображения вашего меню правильно. Вам не нужно какой-либо JavaScript, чтобы сделать эту работу, однако, вы можете сделать это на чистом CSS, добавив следующую строку:

.menu li.menu_container:hover ul { display: block; }

Поскольку парения парит над родителем, а также, это работает только оштрафовать не требует JS вообще.

.menu    { background:#f8f8f8; color:#707070; text-align:center; } 
 
.menu li   { margin-bottom:0 } 
 
.menu li   { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; } 
 
.menu li:hover  { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;} 
 
.menu li a   { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; } 
 
.menu li a:hover { color:#06a7ea; } 
 
.menu li span  { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; } 
 
.menu li span:hover { color:#06a7ea; } 
 
.menu li.menu_container   { position:relative; display:inline-table; } 
 
.menu li.menu_container ul  { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; } 
 
.menu li.menu_container:hover ul { display: block; } 
 
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; } 
 
.menu li.menu_container ul li a  { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; } 
 
.menu li.menu_container ul li a:hover { color:#FF0000; }
<nav class="container-fluid menu"> 
 
    <ul> 
 
     <li><a href="/">Home</a></li> 
 
     <li><a href="/">Home</a></li> 
 
     <li class="menu_container"> 
 
      <span>Home 
 
       <ul> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
        <li><a href="/">Test</a></li> 
 
       </ul> 
 
      </span> 
 
     </li> 
 
    </ul> 
 
</nav>

источник

2016-02-16 17:17:32 somethinghere

+1

Это самый элегантный ответ, спасибо вам что-то! :) –

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

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