javascript - 鼠标悬停在重复悬停时不起作用
问题描述
<!DOCTYPE html>
<html>
<head>
<title> Online Grocery Store </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
.maincoloumn {
float : left;
width : 48%;
height :100%;
border:1px solid black;
}
#second{
float: right;
width: 50%;
height: 50%;
border:1px solid black;
top: 0;
}
#third{
position:absolute;
margin-top:20%;
margin-right:50%;
}
#tableStuff{
float:right;
}
.header
{
padding: 20px;
text-align: left
}
th {
width: 10%;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
#displayDescriptions{
margin-top:15%;
margin-left:20%;
margin-right:5%;
border-collapse: collapse;
border: none;
width: 40%;
}
th:hover {background-color: #006400;}
#tableContents th{
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: blue;
color: yellow;
}
#seaFoodContents{
padding-top: 12px;
padding-bottom: 12px;
color: black;
font-style: bold;
width: 80%;
}
#listFrozenProducts li:hover{
background-color: #006400;
}
#listFrozenProducts{
display:none;
}
#listFrozenSeaProducts{
display:none;
}
#listMilkProducts{
display:none;
}
#listFrozenProducts ul{
list-style-type: none;
padding: 0;
width:50%;
text-align: left;
text-decoration: bold;
height:40%;
border-radius: 25px;
}
#listFrozenProducts ul li {
display: inline;
padding: 20px 20px;
border-radius: 25px;
border-color: #006400;
background-color: #4CAF50;
color: white;
text-decoration: bold;
}
div.seaFoodList {
width:30%;
display: inline-block;
background-color: white;
border:black;
}
div.container1 {
text-align: left;
padding: 10px 20px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
position: relative;
width: 100%;
height: 200px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover
}
div.desc {
padding: 15px;
text-align: center;
}
#displayDescriptions{
display:block;
}
div.productList
{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: bold;
list-style-type: none;
margin-left:0;
padding-left:30px;
text-indent: -4px;
list-style-type:none;
}
div.productList li{
font-size:20px;
list-style-type: none;
background-color: #4CAF50;
color: white;
}
#NestedClasses {
background-color:
font-size:1px;
margin-left:10%;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
border-style: solid;
border-color:#006400;
width:40%;
background-color: #4CAF50;
color: white;
border-radius: 25px;
}
div.productList li:hover{
background-color: #006400;
}
#NestedClasses a { color: inherit; }
div.productList a{color:white;}
#listOtherProducts{
display:none;
}
#freshProducts{
display:none;
}
#listMeatProducts{
display:none;
}
</style>
<script>
function frozenFoodDisplay() {
document.getElementById("listFrozenProducts").style.display= "block";
removeFreshFood();
}
function seaFoodGone() {
document.getElementById("listFrozenSeaProducts").style.display= "none";
removeFreshFood();
}
function seaFoodDisplay()
{
frozenFoodDisplay();
milkProductsGone();
otherProductsGone();
removeFreshFood();
document.getElementById('listFrozenSeaProducts').style.display="block";
}
function otherProductsDisplay(){
document.getElementById("listOtherProducts").style.display="block";
removeFreshFood();
seaFoodGone();
milkProductsGone();
}
function milkProductsDisplay(){
document.getElementById("listMilkProducts").style.display="block";
removeFreshFood();
seaFoodProductsGone();
otherProductsGone();
}
function ProductsGone(){
document.getElementById("listFrozenProducts").style.display="none";
document.getElementById("listFrozenSeaProducts").style.display="none";
document.getElementById("listMilkProducts").style.display="none";
document.getElementById("listOtherProducts").style.display="none";
}
function milkProductsGone(){
;
document.getElementById("listMilkProducts").style.display="none";
}
function seaFoodProductsGone(){
document.getElementById("listFrozenSeaProducts").style.display="none";
}
function otherProductsGone(){
document.getElementById("listFrozenSeaProducts").style.display="none";
}
function frozenFoodGone(){
document.getElementById('getRidOfFrozenFood').style.display="none";
}
function freshFoodDisplay(){
document.getElementById('freshProducts').style.display="block";
frozenFoodGone();
}
function displayMeatProducts(){
freshFoodDisplay();
document.getElementById('listMeatProducts').style.display="block";
}
function meatProductsGone()
{
frozenFoodGone();
document.getElementById('listMeatProducts').style.display="none";
}
function removeFreshFood(){
document.getElementById('getRidOfFreshFood').style.display="none";
}
function listFrozenFood(){
removeFreshFood();
document.getElementById('listFrozenProducts').style.display="block";
}
</script>
</head>
<body>
<div class="maincoloumn" onmouseleave="ProductsGone()" >
<h1 class="header">Grocery store</h1>
<table>
<tr>
<th width="(95/x)%" onmouseover="frozenFoodDisplay()">Frozen Food</th>
<th width="(95/x)%" onmouseover="freshFoodDisplay()">Fresh Food </th>
<th width="(95/x)%">Beverages</th>
<th width="(95/x)%">Home health</th>
<th width="(95/x)%">Pet food</th>
</tr>
</table>
<br>
<div id="getRidOfFrozenFood" onmouseLeave="frozenFoodGone()">
<div id="listFrozenProducts" onmouseover="listFrozenFood()">
<ul>
<li onmouseover="seaFoodDisplay()">Sea Food </li>
<li onmouseover="milkProductsDisplay()">Milk Products</li>
<li onmouseover="otherProductsDisplay()">Others</li>
</ul>
</div>
<br>
<div id="listFrozenSeaProducts" onmouseleave="seaFoodProductsGone()">
<div class="productList">
<ul>
<li style="border-style: solid;border-radius:25px;border-color:#006400;width:40%;padding-left:20px">Fish Fingers </li>
<br>
<div id="NestedClasses">
<form action="index.php" method="post" id="1000">
<li><a href="javascript:;" onclick="document.getElementById('1000').submit();"><input type="hidden" value="1000" name="name"> Fish Fingers(Small)</li>
</form>
<form action="index.php" method="post" id="1001">
<li><a href="javascript:;" onclick="document.getElementById('1001').submit();"><input type="hidden" value="1001" name="name"> Fish Fingers (Large)</li>
</form>
</div>
</ul>
<ul>
<form action="index.php" method="post" id="1003">
<li style="border-style: solid;border-radius:25px;border-color:#006400;width:40%;padding-left:20px"><a href="javascript:;" onclick="document.getElementById('1003').submit();"><input type="hidden" value="1003" name="name"> Shelled Prawns</a></li>
</form>
</ul>
</div>
</div>
<div id="listMilkProducts" onmouseleave="milkProductsGone()">
<div class="productList">
<ul>
<li style="border-style: solid;border-radius:25px;border-color:#006400;width:40%;padding-left:20px">Tube Ice Cream </li>
<br>
<div id="NestedClasses">
<form action="index.php" method="post" id="1004">
<li><a href="javascript:;" onclick="document.getElementById('1000').submit();"><input type="hidden" value="1004" name="name"> Tube Ice Cream -1 litre</a></li>
</form>
<form action="index.php" method="post" id="1005">
<li><a href="javascript:;" onclick="document.getElementById('1001').submit();"><input type="hidden" value="1005" name="name"> Tube Ice Cream-2 litre</a></li>
</form>
</div>
</ul>
</div>
</div>
<div id="listOtherProducts" onmouseleave="otherProductsGone()">
<div class="productList">
<ul>
<form action="index.php" method="post" id="1002">
<li style="border-style: solid;border-radius:25px;border-color:#006400;width:40%;padding-left:20px"><a href="javascript:;" onclick="document.getElementById('1002').submit();"><input type="hidden" value="1002" name="name"> Hamburger Patties</a></li>
</form>
</ul>
</div>
</div>
</div>
<div id="getRidOfFreshFood" onmouseleave="freshFoodGone()">
<div id="freshProducts" onmouseover="freshFoodDisplay()">
<ul>
<li onmouseover="displayMeatProducts()">Meat </li>
<li onmouseover="">Cheese</li>
<li onmouseover="">Fruits</li>
</ul>
</div>
<div id="listMeatProducts" onmouseleave="meatProductsGone()">
<div class="productList">
<ul>
<form action="index.php" method="post" id="3002">
<li style="border-style: solid;border-radius:25px;border-color:#006400;width:40%;padding-left:20px"><a href="javascript:;" onclick="document.getElementById('3002').submit();"><input type="hidden" value="3002" name="name"> T'Bone Steak</a></li>
</form>
</ul>
</div>
</div>
</div>
</div>
JSFIDDLE 和 mozilla 开发人员现在都没有错误。函数调用有什么问题吗？任何人都可以就如何解决它或任何失败的原因提供任何建议吗？我正在考虑使用悬停？或者任何其他方式我可以让它显示？再次感谢您在这方面花费宝贵的时间。真的很感激。