0
我有一个导航栏，具有按钮的悬停效果。此外，无论何时一个页面处于活动状态，该按钮在右侧都有一个边框，以显示它是当前打开的页面。基本上我想要的是对于活动按钮不具有悬停效果，因为悬停效果掩盖了边框。如何使悬停在活动按钮不使用悬停效果？
不要担心错误，我只是没有包括点击按钮时滑动到页面上的页面。
function homeTransition()
{
if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
document.getElementById("aboutContent").className = " animated slideOutRight";
}
if(document.getElementById("projectsContent").className.indexOf("slideInUp") !== -1){
document.getElementById("projectsContent").className = " animated slideOutUp";
}
if(document.getElementById("contactContent").className.indexOf("slideInUp") !== -1){
document.getElementById("contactContent").className = " animated slideOutUp";
}
document.getElementById("homeContent").className = " animated bounceInDown";
}
function aboutTransition()
{
document.getElementById("homeContent").className = " animated bounceOutUp";
document.getElementById("aboutContent").style.visibility = "visible";
document.getElementById("aboutContent").className = "activePage animated slideInLeft";
document.getElementById("projectsContent").className = " animated slideOutUp";
document.getElementById("contactContent").className = " animated slideOutUp";
}
function projectsTransition()
{
document.getElementById("homeContent").className = " animated bounceOutUp";
document.getElementById("projectsContent").style.visibility = "visible";
document.getElementById("projectsContent").className = "activePage animated slideInUp";
document.getElementById("aboutContent").className = " animated slideOutRight";
document.getElementById("contactContent").className = " animated slideOutUp";
}
function contactTransition()
{
document.getElementById("homeContent").className = " animated bounceOutUp";
document.getElementById("contactContent").style.visibility = "visible";
document.getElementById("contactContent").className = "activePage animated slideInUp";
document.getElementById("aboutContent").className = " animated slideOutRight";
document.getElementById("projectsContent").className = " animated slideOutUp";
}
//Menu
$(function() {
function expand() {
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$('.noselect').click(function() {
$('.noselect').removeClass('activePage');
$(this).toggleClass('activePage');
});
$(".button").on('click', expand);
});body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
text-align: center;
}
.menu{
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.6);
width: 250px;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 10px #000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
ul{
padding: 0;
list-style: none;
font-size: .875em;
}
li{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: "Raleway";
width: 250px;
padding: 16% 2%;
color: #a7a7a7;
font-size: 1.8em;
font-weight: 300;
cursor: pointer;
transition: all .4s ease-in-out;
}
li:hover {
color: white;
background-color: #38d8b4;
-o-transition: .6s;
-ms-transition: .6s;
-moz-transition: .6s;
-webkit-transition: .6s;
transition: .6s;
}
.activePage li {
transition: all .1s ease-in-out;
border-right: 8px solid #38d8a1;
background: rgba(0, 0, 0, 0);;
}
.liSeperator {
width: 100%;
padding: .5%;
color: (0, 0, 0, .4);
}
.content {
position: relative;
width: 240px;
}
.button {
width:22px;
height:40px;
margin:80px 97px;
padding: 10px;
cursor:pointer;
transition: all .2s ease-in-out;
}
.button:hover{
transform: scale(1.2);
}
.line {
width: 40px;
height: 2px;
background-color:#fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first{
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second{
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top{
width: 40px;
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom{
width: 40px;
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="menu">
<h1 class="noselect">MENU</h1>
<ul>
<li id="home" class="noselect" onclick="homeTransition()">
<i class="fa fa-home"></i> home
</li>
<div class="liSeperator"></div>
<li id="about" class="noselect" onclick="aboutTransition()">
<i class="fa fa-user"></i> about
</li>
<div class="liSeperator"></div>
<li id="projects" class="noselect" onclick="projectsTransition()">
<i class="fa fa-code"></i> projects
</li>
<div class="liSeperator"></div>
<li id="contact" class="noselect" onclick="contactTransition()">
<i class="fa fa-paper-plane"></i> contact
</li>
</ul>
</div>
<div class="content animated fadeInDown">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
你没问这个同样的问题2小时前？ http://stackoverflow.com/questions/43349258/how-to-make-hovering-over-active-button-not-use-hover-effect –
这与你刚刚提出的问题有何不同（http：// stackoverflow.com/questions/43349258/how-to-make-hovering-over-active-button-not-use-hover-effect/43349472#43349472）？ – Darren
我认为我选择的答案删除了李氏周围的div。但它没有，我自己将它们移除并试图使其工作。但我没有成功。 –