0
我有一個導航欄，有按鈕的懸停效果。此外，無論何時一個頁面處於活動狀態，該按鈕在右側都有一個邊框，以顯示它是當前打開的頁面。基本上我想要的是對於活動按鈕不具有懸停效果，因爲懸停效果掩蓋了邊框。如何讓懸停在活動按鈕不使用懸停效果？
$(window).load(function() {
// Animate loader off screen
$(".loader").fadeOut("slow");;
});
function homeTransition()
{
$(this).toggleClass('activePage');
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.getElemenatById("al-saba").className = " animated bounceInDown";
}
function aboutTransition()
{
document.getElementById("al-saba").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()
{
$(this).toggleClass('activePage');
document.getElementById("al-saba").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()
{
$(this).toggleClass('activePage');
document.getElementById("al-saba").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:14px;
}
li{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: "Raleway";
width: 250px;
padding: 40px 5px;
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;
}
.liSeperator {
width: 100%;
padding: 1px;
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);
}
.activePage li {
transition: all .1s ease-in-out;
color: white;
border-right: 8px solid #38d8a1;
}<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>
你的HTML是無效的 - 股利和李需要必須交換 - UL不能DIV直接孩子 – Pete
好吧，我改變了HTML –
您有一個您的JavaScript錯誤;請修復它。 – Shaggy