Question

我有一个包含类别的菜单栏，当我悬停某个类别时，会在子类别下面显示一个大的下拉列表。

我已经创建了它，你可以在http://www.bootply.com/9Qz14HIz8R

看到它

现在，当我将该类别悬停在背景上时，其背景变为灰色，当我将光标向下移动到子类别下拉时，类别上的灰色背景消失了。

我希望找到一种方法，在悬停时使类别背景变灰，然后当我将光标移动到子类别下拉时，我希望该类别保持灰色背景。

当我将光标移到子类别下拉框之外时，类别背景将会消失。

我想知道实现这一目标的最佳方式是什么。

我认为使用js或jquery我们可以在悬停时使类别处于活动状态，并且当光标位于子类别上时保持活动状态下拉，但是当光标移出下拉框时使其处于非活动状态。 / p>

如何解决这个问题，或者你建议采用不同的方法来实现它。

Answer 1

添加班级名称.active 并在悬停时将样式名称添加到.services-shortcut

<style>
.services-shortcut {
    -webkit-transition: background-color 500ms linear 200ms;
    -o-transition: background-color 500ms linear 200ms;
    transition: background-color 500ms linear 200ms;

}
.services-shortcut:hover,
.services-shortcut.active {
    color: #555;
    background: none repeat scroll 0% 0% #ddd;
}
</style>

<script>
jQuery('div.dropdown').hover(function() {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>

如果你想使用.on（）方法，请执行以下操作：

jQuery('div.dropdown').on(
    'mouseenter', function () {
        jQuery(this).find('.services-shortcut').addClass('active');
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    },
    'mouseleave', function () {
        jQuery(this).find('.services-shortcut').removeClass('active');
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    }
);

Answer 2

试试这个：

CSS：

.category-overlay{
    width:1190px;
    height:90px;
    background:#ddd;
    margin-top:30px;
    }

    .services-shortcut {
       color: #555;
       background: none repeat scroll 0% 0% #ddd;
    }

HTML：

<div class="container">
   <div class="row">
      <div class="col-xs-12">
 <h1></h1>        <div class="category-box">
            <div class="dropdown" class="">
               <a href="HTTP://GOOGLE.COM" target="_blank" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-bullhorn fa-3x"></i>
                     <h5>CATEGORY 1</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 1</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-car fa-3x"></i>
                     <h5>CATEGORY 2</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 2</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-file-text fa-3x"></i>
                     <h5>CATEGORY 3</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 3</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
                     <h5>CATEGORY 4</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 4</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-cogs fa-3x"></i>
                     <h5>CATEGORY 5</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 5</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-users fa-3x"></i>
                     <h5>CATEGORY 6</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 6</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category>
                     <i class="fa fa-heart fa-3x"></i>
                     <h5>CATEGORY 7</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 7</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div data-category<h1></h1>>
                     <i class="fa fa-briefcase fa-3x"></i>
                     <h5>CATEGORY 8</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 8</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

JQUERY：

jQuery('div.dropdown').hover(function() {

          jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

$('div[data-category]').mouseenter(function(){
  $(this).addClass('services-shortcut');    
})

$('div[class=dropdown]').mouseleave(function(){
  $(this).find('div[data-category]').removeClass('services-shortcut');
});

如何在悬停时激活元素，并在将鼠标悬停在另一个特定div上时保持活动状态

2 个答案: