我如何添加活动类使用鼠标悬停在菜单项与jquery
How Can I add active class using mouse hover in menu item with jquery?
我使用了这段代码,但它只适用于点击事件,但我想在悬停中设置它并单击两者,悬停选项将用于悬停,当悬停时,它将删除活动类。
(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 );
.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);
}
<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>
这是我的代码,它的工作在点击事件,但我想设置它在鼠标悬停,我怎么能做到这一点?
类似于@Akash Agrawal,但是你需要在jQuery的hover函数中添加一个hover out(鼠标离开)状态,否则你鼠标移到的所有元素都将获得添加到它们的类,但永远不会删除。我用你的代码测试了它,它在悬停上给出了水平线-但不是垂直的。可能是我使用的选择器,但至少它给了你一个基于悬停的效果,你可以进一步研究。
$(".menu_link" ).hover(function(){$(this).addClass("menu_item-current")},
function(){$(this).removeClass("menu_item-current")
});
试试这样写:
$( ".class/#div" ).hover(function() {
$( this ).addClass("menu_item-current");
});
试试这个代码…
$(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');
});
});
相关文章:
- 当鼠标悬停在文本中的单词上时显示警报
- d3.js鼠标悬停鼠标输出问题
- 悬停(鼠标离开)方法不显示效果
- 为什么addEventListener只执行我的函数,而不为其创建鼠标悬停/鼠标打开事件
- 在鼠标悬停/鼠标出类中的任何元素时更改元素 ID
- 检测鼠标悬停/鼠标单击,无论 Z 顺序/图层级别如何
- 悬停/鼠标悬停功能冲突
- 子元素的 JavaScript 鼠标悬停/鼠标退出问题
- 在 iPad 上触发悬停/鼠标退出/模糊
- 如何通过按钮单击和鼠标悬停/鼠标退出显示和隐藏节点文本?D3/JS.
- 背景图像在悬停/鼠标悬停时消失,菜单在IE中不起作用
- jQuery鼠标悬停/鼠标悬停将不适用于Live
- jQuery-悬停以在刷新时触发悬停/鼠标悬停
- 悬停/鼠标悬停未在元素内部的每次移动中激活
- HighCharts条形图:悬停鼠标时显示条形值
- 鼠标悬停/鼠标离开,鼠标进入/鼠标离开,鼠标悬停闪烁问题
- 滚动时未触发鼠标悬停/鼠标输入
- JavaScript-如何在鼠标悬停/鼠标悬停上同时更改TR中所有TD的背景颜色
- 记住并在悬停鼠标悬停后显示以前活动的导航选项卡
- JavaScript延迟CSS悬停/鼠标悬停效果