0
私はこのコードを使用しましたが、クリックイベントでのみ動作しますが、これをホバーに設定して両方をクリックすると、ホバーオプションがホバーになり、ホバーアウトするとアクティブなクラスが削除されます。jqueryのメニュー項目にマウスを置いてアクティブなクラスを追加できますか？
(function() {
\t \t \t \t [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
\t \t \t \t \t var menuItems = menu.querySelectorAll('.menu_link'),
\t \t \t \t \t \t setCurrent = function(ev) {
\t \t \t \t \t \t \t ev.preventDefault();
\t \t \t \t \t \t \t var item = ev.target.parentNode; // li
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t // return if already current
\t \t \t \t \t \t \t if(classie.has(item, 'menu_item-current')) {
\t \t \t \t \t \t \t \t return false;
\t \t \t \t \t \t \t }
\t \t \t \t \t \t \t // remove current
\t \t \t \t \t \t \t classie.remove(menu.querySelector('.menu_item-current'), 'menu_item-current');
\t \t \t \t \t \t \t // set current
\t \t \t \t \t \t \t classie.add(item, 'menu_item-current');
\t \t \t \t \t \t };
\t \t \t \t \t
\t \t \t \t \t [].slice.call(menuItems).forEach(function(el) {
\t \t \t \t \t \t el.addEventListener('click', setCurrent);
\t \t \t \t \t });
\t \t \t \t });
\t \t \t \t [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
\t \t \t \t \t link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
\t \t \t \t \t new Clipboard(link);
\t \t \t \t \t link.addEventListener('hover', function() {
\t \t \t \t \t \t classie.add(link, 'link-copy--animate');
\t \t \t \t \t \t setTimeout(function() {
\t \t \t \t \t \t \t classie.remove(link, 'link-copy--animate');
\t \t \t \t \t \t }, 300);
\t \t \t \t \t });
\t \t \t \t });
\t \t \t })(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>これは、クリックイベントに私のコードの作品ですが、私は、マウスのホバーでそれを設定したい、私はそれをどのように行うことができますか？私はそれがうまく願っています
$(".class/#div").hover(function() {
$(this).addClass("menu_item-current");
});
：
あなたの完全なコードなしでテストするのは難しい...このコードを試してみてください。完全なコードを投稿してください。それ以外の場合は-https：//api.jquery.com/mouseover/ –
@WillDiFruscio質問が編集されましたのでご確認ください。事前に感謝 –