Question

我创建了一个简单的导航菜单。现在我想在悬停儿童UL时将“活动”类添加到相关的“a”。我该怎么做？我无法用CSS找到它的解决方案。我的代码在这里：

HTML：

                      <nav class = 'main_navigation'>
                           <ul class = 'parent_ul'>
                               <li><a  href="#">Home</a></li>
                               <li><a  href="#">Themes</a>
                                       <ul class = 'child_ul'>
                                          <li><a href='#'>Theme 1</a></li>
                                          <li><a href='#'>Theme 2</a></li>
                                          <li><a href='#'>Theme 3</a></li>
                                          <li><a href='#'>Theme 4</a></li>
                                       </ul>
                                   </li>
                                   <li><a href="#">Tools</a></li>
                                   <li><a href="#">Support</a></li>
                                   <li><a href="#">Contact</a></li>
                                            </ul>
                                    </nav>

.active class：

.active{
 background:red;
 }

Answer 1

Jquery的：

$( ".parent_ul a" ).hover(
  function() {
    $( this ).addClass( "active" );
  }, function() {
    $( this ).removeClass( "active" );
  }
);

Jquery hover（）文档： https://api.jquery.com/hover/

Answer 2

不使用javascript或jQuery，如果您只需要在“悬停”ul时更改链接的外观，则只能在CSS中执行此操作。

CSS示例：

nav.main_navigation a:hover {
  background:red;
}

你甚至可以添加第二个CSS来强调子菜单：

nav.main_navigation li:hover {
  background: pink;
}

使用jQuery导航菜单

2 个答案: