2017-04-11 101 views
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>

+0

你沒問這個同樣的問題2小時前? http://stackoverflow.com/questions/43349258/how-to-make-hovering-over-active-button-not-use-hover-effect –

+0

這與你剛剛提出的問題有何不同(http:// stackoverflow.com/questions/43349258/how-to-make-hovering-over-active-button-not-use-hover-effect/43349472#43349472)? – Darren

+0

我認爲我選擇的答案刪除了李氏周圍的div。但它沒有,我自己將它們移除並試圖使其工作。但我沒有成功。 –

回答

2

.activePage選擇是錯誤的。需要是.activePage,而不是.activePage li

然後相同的答案之前 - 使用:not()從您:hover選擇排除.activePageli:not(.activePage):hover

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:not(.activePage):hover { 
 
    color: white; 
 
    background-color: #38d8b4; 
 
    -o-transition: .6s; 
 
    -ms-transition: .6s; 
 
    -moz-transition: .6s; 
 
    -webkit-transition: .6s; 
 
    transition: .6s; 
 
} 
 

 
.activePage { 
 
    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>

+0

謝謝!這工作,以前的答案沒有工作出於某種原因 –

+0

@OpticLukie,因爲你改變了HTML結構。 –

+0

@OpticLukie如果此答案對您有所幫助,請將其標記爲已接受。 – Darren