菜单当前和悬停效果

Question

即时通讯尝试获取菜单当前动画，所以我做到了：

 $(document).ready(function() { $('.menu li:eq(0)').addClass('current'); $('.menu').onePageNav(); }); // JavaScript Document /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav * * Copyright (c) 2010 Trevor Davis (http://trevordavis.net) * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://jquery.org/license * * @version 3.0.0 * * Example usage: * $('#nav').onePageNav({ * currentClass: 'current', * changeHash: false, * scrollSpeed: 750 * }); */ ;(function($, window, document, undefined){ // our plugin constructor var OnePageNav = function(elem, options){ this.elem = elem; this.$elem = $(elem); this.options = options; this.metadata = this.$elem.data('plugin-options'); this.$win = $(window); this.sections = {}; this.didScroll = false; this.$doc = $(document); this.docHeight = this.$doc.height(); }; // the plugin prototype OnePageNav.prototype = { defaults: { navItems: 'a', currentClass: 'current', changeHash: false, easing: 'swing', filter: '', scrollSpeed: 750, scrollThreshold: 0.5, begin: false, end: false, scrollChange: false }, init: function() { // Introduce defaults that can be extended either // globally or using an object literal. this.config = $.extend({}, this.defaults, this.options, this.metadata); this.$nav = this.$elem.find(this.config.navItems); //Filter any links out of the nav if(this.config.filter !== '') { this.$nav = this.$nav.filter(this.config.filter); } //Handle clicks on the nav this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this)); //Get the section positions this.getPositions(); //Handle scroll changes this.bindInterval(); //Update the positions on resize too this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this)); return this; }, adjustNav: function(self, $parent) { self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass); $parent.addClass(self.config.currentClass); }, bindInterval: function() { var self = this; var docHeight; self.$win.on('scroll.onePageNav', function() { self.didScroll = true; }); self.t = setInterval(function() { docHeight = self.$doc.height(); //If it was scrolled if(self.didScroll) { self.didScroll = false; self.scrollChange(); } //If the document height changes if(docHeight !== self.docHeight) { self.docHeight = docHeight; self.getPositions(); } }, 250); }, getHash: function($link) { return $link.attr('href').split('#')[1]; }, getPositions: function() { var self = this; var linkHref; var topPos; var $target; self.$nav.each(function() { linkHref = self.getHash($(this)); $target = $('#' + linkHref); if($target.length) { topPos = $target.offset().top; self.sections[linkHref] = Math.round(topPos); } }); }, getSection: function(windowPos) { var returnValue = null; var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold); for(var section in this.sections) { if((this.sections[section] - windowHeight) < windowPos) { returnValue = section; } } return returnValue; }, handleClick: function(e) { var self = this; var $link = $(e.currentTarget); var $parent = $link.parent(); var newLoc = '#' + self.getHash($link); if(!$parent.hasClass(self.config.currentClass)) { //Start callback if(self.config.begin) { self.config.begin(); } //Change the highlighted nav item self.adjustNav(self, $parent); //Removing the auto-adjust on scroll self.unbindInterval(); //Scroll to the correct position self.scrollTo(newLoc, function() { //Do we need to change the hash? if(self.config.changeHash) { window.location.hash = newLoc; } //Add the auto-adjust on scroll back in self.bindInterval(); //End callback if(self.config.end) { self.config.end(); } }); } e.preventDefault(); }, scrollChange: function() { var windowTop = this.$win.scrollTop(); var position = this.getSection(windowTop); var $parent; //If the position is set if(position !== null) { $parent = this.$elem.find('a[href$="#' + position + '"]').parent(); //If it's not already the current section if(!$parent.hasClass(this.config.currentClass)) { //Change the highlighted nav item this.adjustNav(this, $parent); //If there is a scrollChange callback if(this.config.scrollChange) { this.config.scrollChange($parent); } } } }, scrollTo: function(target, callback) { var offset = $(target).offset().top; $('html, body').animate({ scrollTop: offset }, this.config.scrollSpeed, this.config.easing, callback); }, unbindInterval: function() { clearInterval(this.t); this.$win.unbind('scroll.onePageNav'); } }; OnePageNav.defaults = OnePageNav.prototype.defaults; $.fn.onePageNav = function(options) { return this.each(function() { new OnePageNav(this, options).init(); }); }; })( jQuery, window , document ); 

 /*------menu------ */ .menu { margin-top: 11%; position:fixed; width: 50%; right: -25%; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg); z-index: 9999; margin-right: 20px; } .menu li { display: inline; text-align: center; } #verti { display: inline-block; width: 25%; padding: 20px 0 10px 0; margin: 0; text-decoration: none; color: #333; } .one.current ~ hr { margin-left: 0%; } .two.current ~ hr { margin-left: 25%; } .three.current ~ hr { margin-left: 50%; } .four.current ~ hr { margin-left: 75%; } .one:hover ~ hr { margin-left: 0%; } .two:hover ~ hr { margin-left: 25%; } .three:hover ~ hr { margin-left: 50%; } .four:hover ~ hr { margin-left: 75%; } .menu hr { height: .15rem; width: 25%; margin: 0; background: rgba(0,0,0,1); border: none; transition: .3s ease-in-out; } /*------menu fin------ */ div { margin: 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="menu"> <li class="one"><a id="verti" href="#home">home</a></li><!-- --><li class="two"><a id="verti" href="#work">work</a></li><!-- --><li class="three"><a id="verti" href="#about">about</a></li><!-- --><li class="four"><a id="verti" href="#contact">contact</a></li> <hr /> </ul> <div id="home" class="point"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed. Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam. </div> <div id="work" class="point"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed. Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam. Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc. In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a. Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo. </div> <div id="about" class="point"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed. Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam. Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc. In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a. Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo. </div> <div id="contact" class="point"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed. Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam. Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc. In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a. Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo. </div> <footer> </footer> </section> 

我想将非活动菜单的不透明度设为0.4，当前活动的1是1，我希望同时更改当前事件发生变化时的hr，并且在悬停时有人有想法吗？

Answer 1

将css从.menu li更改为：

.menu li {
  display: inline;
  text-align: center;
  opacity: 0.4;
}

并为.current类添加一个新样式：

.current {
  opacity: 1 !important;
}