首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用jquery在菜单项中使用鼠标悬停添加活动类?

如何使用jquery在菜单项中使用鼠标悬停添加活动类?
EN

Stack Overflow用户
提问于 2016-08-21 21:22:12
回答 3查看 1.8K关注 0票数 0

我使用了这段代码,但它只适用于单击事件,但我想在悬停和单击两者中设置它,悬停选项将仅用于悬停,当悬停时它将删除活动类。

代码语言:javascript
复制
(function() {
				[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
					var menuItems = menu.querySelectorAll('.menu_link'),
						setCurrent = function(ev) {
							ev.preventDefault();

							var item = ev.target.parentNode; // li
							
							// return if already current
							if( classie.has(item, 'menu_item-current') ) {
								return false;
							}
							// remove current
							classie.remove(menu.querySelector('.menu_item-current'), 'menu_item-current');
							// set current
							classie.add(item, 'menu_item-current');
						};
					
					[].slice.call(menuItems).forEach(function(el) {
						el.addEventListener('click', setCurrent);
					});
				});

				[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
					link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
					new Clipboard(link);
					link.addEventListener('hover', function() {
						classie.add(link, 'link-copy--animate');
						setTimeout(function() {
							classie.remove(link, 'link-copy--animate');
						}, 300);
					});
				});
			})(window);
      


( function( window ) {

'use strict';


function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );
代码语言:javascript
复制
.menu_item {
  display: block;
  margin: 1em 0;
}
.menu_link {
  -moz-user-select: none;
  cursor: pointer;
  display: block;
  font-size: 1.05em;
  font-weight: bold;
  padding: 10px 20px;
  text-decoration: none !important;
}
.menu_list {
  display: flex;
  flex-wrap: wrap;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  position: relative;
}
.menu {
  line-height: 1;
  margin: 0 ;
}
.menu-miranda .menu_item {
  margin: 10px 5px;
  position: relative;
}
.menu-miranda .menu_link {
  color: #b5b5b5;
  display: block;
  min-width: auto;
  position: relative;
  text-align: center;
  transition: color 0.3s ease 0s;
}
.menu-miranda .menu_link:hover, .menu-miranda .menu_link:focus {
    color: #929292;
}
.menu-miranda .menu_item-current .menu_link {
    color: #d94f5c;
}
.menu-miranda .menu_item::before, .menu-miranda .menu_item::after, .menu-miranda .menu_link::before, .menu-miranda .menu_link::after {
    background: #d94f5c none repeat scroll 0 0;
    content: "";
    position: absolute;
    transition: transform 0.1s cubic-bezier(1, 0.68, 0.16, 0.9) 0s;
}
.menu-miranda .menu_item::before, .menu-miranda .menu_item::after {
    height: 100%;
    top: 0;
    transform: scale3d(1, 0, 1);
    width: 2px;
}
.menu-miranda .menu_item::before {
    left: 0;
    transform-origin: 50% 100% 0;
}
.menu-miranda .menu_item::after {
    right: 0;
    transform-origin: 50% 0 0;
}
.menu-miranda .menu_link::before, .menu-miranda .menu_link::after {
    height: 2px;
    left: 0;
    transform: scale3d(0, 1, 1);
    width: 100%;
}
.menu-miranda .menu_link::before {
    top: 0;
    transform-origin: 0 50% 0;
}
.menu-miranda .menu_link::after {
    bottom: 0;
    transform-origin: 100% 50% 0;
}
.menu-miranda .menu_item .menu_link::after {
    transition-delay: 0.3s;
}
.menu-miranda .menu_item-current .menu_link::after {
    transition-delay: 0s;
}
.menu-miranda .menu_item::before {
    transition-delay: 0.2s;
}
.menu-miranda .menu_item-current::before {
    transition-delay: 0.1s;
}
.menu-miranda .menu_item .menu_link::before {
    transition-delay: 0.1s;
}
.menu-miranda .menu_item-current .menu_link::before {
    transition-delay: 0.2s;
}
.menu-miranda .menu_item-current::after {
    transition-delay: 0.3s;
}
.menu-miranda .menu_item-current::before, .menu-miranda .menu_item-current::after, .menu-miranda .menu_item-current .menu_link::before, .menu-miranda .menu_item-current .menu_link::after {
    transform: scale3d(1, 1, 1);
}
代码语言:javascript
复制
<div class="nav-collapse collapse pull-right menu menu-miranda">
                        <ul class="menu_list" id="top-navigation">
                            <li class="menu_item menu_item-current"><a class="menu_link"  href="#home">Home</a></li>
                            <li class="menu_item"><a class="menu_link" href="#service">Services</a></li>
                            <li class="menu_item"><a class="menu_link"  href="#portfolio">Portfolio</a></li>
                            <li class="menu_item"><a class="menu_link"  href="#about">About</a></li>
                            <li class="menu_item"><a class="menu_link"  href="#clients">Clients</a></li>
                            <li class="menu_item"><a class="menu_link"  href="#price">Price</a></li>
                            <li class="menu_item"><a class="menu_link"  href="#contact">Contact</a></li>
                        </ul>
                    </div>

这是我的代码,它在点击事件上工作,但我想在鼠标悬停时设置它,我该怎么做呢?

EN

回答 3

Stack Overflow用户

发布于 2016-08-22 18:42:59

与@Akash Agrawal类似,但您还需要在jQuery的悬停功能中添加悬停(鼠标移出)状态-否则,您鼠标悬停在其上的所有元素都将被添加到它们中,但永远不会被删除。我用你的代码测试了它,它给出了悬停时的水平线--但没有给出垂直线。可能是我使用的选择器,但至少它给了你一个基于悬停的效果,你可以进一步研究。

代码语言:javascript
复制
$(".menu_link" ).hover(function(){$(this).addClass("menu_item-current")},
       function(){$(this).removeClass("menu_item-current")
      });
票数 1
EN

Stack Overflow用户

发布于 2016-08-22 18:36:54

尝试如下所示:

代码语言:javascript
复制
$( ".class/#div" ).hover(function() {
  $( this ).addClass("menu_item-current");
});

我希望它能起作用。

票数 0
EN

Stack Overflow用户

发布于 2016-08-22 18:57:32

试试这段代码..

代码语言:javascript
复制
$(function(){
	$('.menu_link').on('mouseenter', function(){
		$(this).closest('.menu_item').addClass('menu_item-current');
	});	
	$('.menu_link').on('mouseleave', function(){
		$(this).closest('.menu_item').removeClass('menu_item-current');
	});	
});

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39064666

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档