隱藏div不會顯示onhover圖像

Question

爲什麼我的懸停功能不起作用？

$("#staff").on("hover", function() { 
 
    $("#staffdn").show(); 
 
});

#navbar { 
 
    position: fixed; 
 
    border-style: solid; 
 
    border-color: #ffd3d9; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
    border-width: 20px; 
 
    left: -20px; 
 
    background-color: #ffd3d9; 
 
} 
 
#staffdn { 
 
    position: fixed; 
 
    border-style: solid; 
 
    border-color: #ffd3d9; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
    border-width: 20px; 
 
    left: 100px; 
 
    top: 100px; 
 
    background-color: #ffd3d9; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar"> 
 
    <ul> 
 
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li> 
 
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li> 
 
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li> 
 
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li> 
 
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li> 
 
    </ul> 
 
</div> 
 
<div id="staffdn"> 
 
    <ul> 
 
    <li><img src="Staff-memebers.png"></li> 
 
    <li><img src="commands.png"></li> 
 
    </ul> 
 
</div>

Answer 1

你應該：

• 不使用visibility: hidden，而是使用display: none的加載時間。
• 加載頁面時隱藏。
• 使用hover作爲函數而不是event。
• 將$(document).ready()中的所有腳本放在DOM Loaded元素上運行。
• 然後將CSS更改爲：left: 80px; top: 60px;。

這應該工作：

$(function() { 
    $("#staffdn").hide(); 
    $("#Staff").hover(function() { 
    $("#staffdn").show(); 
    }, function() { 
    $("#staffdn").hide(); 
    }); 
}); 

片段

$(function() { 
 
    $("#staffdn").show(); 
 
    $("#Staff").hover(function() { 
 
    $("#staffdn").show(); 
 
    }, function() { 
 
    $("#staffdn").hide(); 
 
    }); 
 
});

#navbar { 
 
    position: fixed; 
 
    border-style: solid; 
 
    border-color: #ffd3d9; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
    border-width: 20px; 
 
    left: -20px; 
 
    background-color: #ffd3d9; 
 
} 
 
#staffdn { 
 
    position: fixed; 
 
    border-style: solid; 
 
    border-color: #ffd3d9; 
 
    border-top-right-radius: 30px; 
 
    border-bottom-right-radius: 30px; 
 
    border-width: 20px; 
 
    left: 100px; 
 
    top: 100px; 
 
    background-color: #ffd3d9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="navbar"> 
 
    <ul> 
 
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li> 
 
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li> 
 
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li> 
 
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li> 
 
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li> 
 
    </ul> 
 
</div> 
 
<div id="staffdn"> 
 
    <ul> 
 
    <li><img src="Staff-memebers.png"></li> 
 
    <li><img src="commands.png"></li> 
 
    </ul> 
 
</div>