Мышь не работает при повторном зависании - PullRequest
Новая
       0

Мышь не работает при повторном зависании

0 голосов
/ 11 мая 2018 
<!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 Developer. Что-то не так с вызовом функции? Может ли кто-нибудь дать какие-либо предложения о том, как по крайней мере обойти это или какие-либо причины, по которым это не удается? Я думаю об использовании парения? Или каким-либо другим способом я могу заставить его отображать? Большое спасибо еще раз за то, что потратили на это ваше ценное время. Очень ценю это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...