菜单当前和悬停效果
menu current and hover effect
我正在尝试获取菜单当前动画，所以我这样做了:
$(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，我希望在当前事件发生变化和悬停时同时发生变化
有人有想法吗？
将 css 从 .menu li 更改为：
.menu li {
display: inline;
text-align: center;
opacity: 0.4;
}
并为 .current 添加新样式 class:
.current {
opacity: 1 !important;
}
我正在尝试获取菜单当前动画，所以我这样做了:
$(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，我希望在当前事件发生变化和悬停时同时发生变化 有人有想法吗？
将 css 从 .menu li 更改为：
.menu li {
display: inline;
text-align: center;
opacity: 0.4;
}
并为 .current 添加新样式 class:
.current {
opacity: 1 !important;
}