悬停列表项上的引导导航栏删除类活动，鼠标移出返回类活动

Posted 2023-05-08

【中文标题】悬停列表项上的引导导航栏删除类活动，鼠标移出返回类活动

【英文标题】：Bootstrap navbar on hover list item remove class active, on mouse out return class active

【发布时间】：2017-04-25 08:35:31

【问题描述】：

你能帮我用引导导航栏实现这种情况吗？正如我在标题中所写，我需要意识到，当单击导航栏菜单中的列表项时，当前项应该使类处于活动状态并用顶部边框标记，但是在将鼠标悬停在其他列表项上时，类活动（也是边框顶部）应该从当前具有活动类的列表项..

实际上，当鼠标在菜单上移动时，红线会跟随鼠标。当鼠标离开菜单项时，红线返回活动菜单上方

这是我当前的代码 - http://www.bootply.com/uvUwueNuOG

您会注意到 Home 卡处于活动状态，当悬停时，活动类消失并根据鼠标所在的位置移动，但是当单击菜单中的另一张卡时，没有任何反应

【问题讨论】：

许多框架和/或主题根据元素是否具有active 类来提供功能或样式。如果您只想为元素设置样式，请考虑将您的类命名为其他名称，而不是 active。当您真正想要激活某些东西时使用active 类，而不是当您想要为它着色时。其他课程也是如此，例如menu、menu-item、open、invisible 等...远离常用的英语网络相关术语，您会很安全。

【参考方案1】：

你有问题，因为你不应该添加/删除活动类，除非你想让某个元素“活动”。因此，第一步是不要在悬停另一个元素时从“活动”元素中删除.active。如果您希望.active 元素丢失其border-top-color，则需要将其放入您的CSS：

.navbar-default:hover .navbar-nav>.active:not(:hover) > a 
  border-top-color: transparent;

确保它在bootstrap.css 之后加载，否则您将需要更强大的选择器。现在，当菜单悬停时，active 项目不再看起来 active。现在，使用 javascript，您可以只使用应该使用的 active 类：标记活动元素。因此，当您想让另一个元素处于活动状态时，您可以将其从所有元素中移除并将其应用于您单击的元素。

$(document).ready(function()
  $('.navbar-default li').on('click', function()
    $('.navbar-default li').removeClass('active');
    $(this).addClass('active');
  )
);

够好吗？

【讨论】：

正是如此，这是迄今为止最好的解决方案，只需要一点点修复。将鼠标悬停在活动项目上时，边框顶部也会消失，但不应该。

优秀的安德烈，但我忘了告诉你还有什么事情发生。尝试将鼠标悬停在 .navbar-nav 之外的任何地方，您会注意到同样的事情发生了，这是一个问题。当您在 navbar-nav 外悬停时应该没有交互，在这种情况下不好

恕我直言，这不是我的问题。我可以轻松解决它，就像我到目前为止解决了您的所有请求一样，但这必须停止。我目前可以租用，但不在 *** 上。我在这里的职责是帮助人们更好地理解网页设计概念，并且总的来说，提高他们的整体技术。我在这里是因为我向他人学习，并希望回报他人并帮助他人成为更好的网页设计师。这就是为什么我总是解释这个原理。但我不是在这里提供免费的网页设计服务。祝你有美好的一天。

好的，但根本不了解您的解决方案的重点。您的解决方案的逻辑是什么，当您将鼠标悬停在徽标、标志或按钮上时（因为它们都在 .navbar-default 中），红色边框应该消失。 prnt.sc/djff1w

我的解决方案的重点是回答您的请求。在我提供解决方案后，您意识到最初的请求不完整，您提出了另一个请求，具有更具体的要求。在我看来，你不是来这里学习的，而是来获得免费解决方案的。你没有努力理解我在做什么。不努力学习。既然你不愿意学，我也不愿意教。这就是我的观点。

【参考方案2】：

好的，我知道了

.navbar-default .navbar-nav:hover>.active:not(:hover) > a 
  border-top-color: transparent;

【参考方案3】：

请试试这个...它将打开一个关于删除类和重新添加类的弹出窗口，以确认您可以从那里删除警报。在此示例中，我使用您的代码将 .hover 替换为 .mouseenter 和 leave .mouseleave

现在请尝试这也是在点击时添加活动类..

//Add class active on specific list item
$(document).ready(function()

    var item, elem, makeActive;
    item = '.navbar-nav li.item';

    elem = document.querySelectorAll(item);

    makeActive = function () 
        for (var i = 0; i < elem.length; i++)
            elem[i].classList.remove('active');

            this.classList.add('active');
    ;

    for (var i = 0; i < elem.length; i++)
        elem[i].addEventListener('mousedown', makeActive);

    var $home = $(".navbar-default .navbar-nav>.active");
 
    $(".navbar-default .navbar-nav li").mouseenter(function () 
        $home.removeClass("active");
     // alert('active class removed')
    )
	.mouseleave(function () 
        $(this).removeClass("active");
        $home.addClass("active");
      // alert('active class readded')
    );
  
   $(".navbar-nav li").click(function () 
         $(this).addClass("active");
    );
  
);

body 
    font-family: 'Lato', sans-serif;
    color: #3e3e3e;
    background: #f6f6f6;


ul 
    list-style: none;
    padding: 0px;
    display: block;


a,
a:hover,
a:focus 
    text-decoration: none;
    color: #ffffff;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;


p 
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;


h3 
    font-family: 'Lustria', sans-serif;
    text-align: center;
    color: #3e3e3e;
    font-size: 27px;
    line-height: 33px;
    word-wrap: break-word;


h4 
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 21px;


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button 
    -webkit-appearance: none;
    margin: 0;


input[type="number"] 
    -moz-appearance: textfield;


textarea:focus,
input:focus,
input[type]:focus 
    outline: none;
    border: none;
    box-shadow: 0 0 10px #353d4a inset;


/********** HEADER ****************/

.navbar-default 
    border: none;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 0px;


.navbar-brand>img 
    position: relative;
    z-index: 1;


.navbar > .container .navbar-brand.shrink 
    height: 52px;
    background: #403f44;

.navbar-brand>img.shrink 
    width: 46%;
    margin: 0px auto;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;


.navbar > .container .navbar-brand 
    padding: 0px;
    margin: 0px 35px 0px 0px;
    transition: 0s;


.navbar-default .navbar-nav li 
    margin-right: 15px;
    position: relative;
    z-index: 0;


.navbar-default .navbar-nav>li>a 
    text-transform: uppercase;
    color: #3e3e3e;
    padding: 22px 10px;
    letter-spacing: 0.4px;
    font-size: 20px;
    font-weight: 400;
    border-top: 6px solid transparent;


.navbar-default .navbar-nav .item>a.shrink 
    padding: 12px 10px 14px;



.nav.navbar-nav .language a.shrink 
    margin-top: 14px;


.navbar-default .booking .btn-default.shrink 
    top: 3px;


.navbar-default .booking .btn-default a.shrink 
    padding: 12px 22.5px;
    font-size: 16px;


.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a:hover 
    color: #3e3e3e;
    background: none;
    border-top-color: #ff2a00;


.nav.navbar-nav .language a 
    border-top: 0px;
    padding: 0px;
    margin: 27px 18px 0px 20px;


.navbar-default .language img 
    margin-right: 26px;


.language.dropdown .dropdown-toggle:after 
    content: "\f107";
    font-family: FontAwesome;
    font-size: 40px;
    position: absolute;
    left: 52px;
    top: 4px;


.language .dropdown-menu:after 
    content: "\f0d8";
    font-family: FontAwesome;
    color: #ffffff;
    font-size: 40px;
    position: absolute;
    right: 38px;
    top: -34px;


.nav.navbar-nav .dropdown-menu li 
    margin-right: 0px;


.nav.navbar-nav .dropdown-menu li a 
    margin: 15px 18px;


.nav.navbar-nav .dropdown-menu li:last-child a 
    margin-bottom: 10px;


.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus 
    background: none;


.navbar-default .booking .btn-default,
.navbar-default .booking .btn-default:hover,
.navbar-default .booking .btn-default:focus 
    font-size: 19px;
    border: none;
    padding: 0px;
    outline: 0;
    background: #ff2a00;
    border-radius: 6px;
    position: absolute;
    top: 36px;


.navbar-default .booking .btn-default a 
    display: block;
    font-size: 19px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 15.5px 31px;


.dropdown-menu 
    top: 134%;
    left: -65%;


.navbar-collapse.collapse.in ul 
    text-align: center;
    margin-top: 50px;


.navbar-collapse.collapse.in 
    margin-bottom: 25px;


.navbar-collapse.collapse.in li a 
    display: inline-block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
		 <nav class="navbar navbar-default navbar-fixed-top">
  		  <div class="container">
    	  <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#" title="Logo">
		      	Logo
		      </a> 
		    </div>
	    	<!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="navbar-collapse">
		      <ul class="nav navbar-nav">
		        <li class="item active">
		          <a href="#" title="Home">Home</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Apartments">Apartments</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Rates">Rates</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Location">Location</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Contact">Contact</a>
		        </li>
		       	
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-->
		 </nav>
		</div>

【讨论】：

尝试点击另一个菜单卡，例如“Rates”，没有任何反应，对吧？我还需要，当单击另一个菜单卡时，在该菜单项上添加活动类