Question

我创建了2个菜单：prod＆amp; prod2，我发现当鼠标聚焦在prod2上时，背景颜色会改变，但当鼠标聚焦在prod1上时，背景颜色不会改变，为什么它不会改变？

HTML

<body>          
    <ul class="hMenu">          
        <li  onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
            <a style="color: red;" href="javascript:void(0);">prod</a>              
            <div><br/> 
                <!-- here-->
                <div class="arrow_box" >  
                    <div class="lay1">
                       <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div>
                       <br><br>
                       <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                    </div>
                </div>
            </div>
        </li>     
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
            <a style="color: red;" href="javascript:void(0);">prod2</a>
            <div  class="arrow_box">                                               
                <div  class="lay1">
                    <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div>
                    <br><br>
                    <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                </div>
            </div>
        </li>  
    </ul>   
    <br/><br/><br/><br/><br/>
    Test
</body>

CSS

<style>             
        ul.hMenu  { 
            margin: 0;
            padding: 0; 
            z-index: 1;                 
        }
        ul.hMenu > li  {  
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width:140px;
        }
        ul.hMenu li a { 
            display: block; 
            text-align: left;
            text-decoration: none
        }          
        ul.hMenu li > div  {                    
            position: absolute;             
            display: none;                
        }
        ul.hMenu div a {background: yellow;     
        }           

        div.lay1{ float:left;}  
        div.lay1 br{line-height:50%}
        .topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
        .secondMenu{font:12px arial;color:#000000;text-decoration: none;}
        .arrow_box {
            position: relative;
            background: red;
            border: 4px solid #c2e1f5;
        }
        .arrow_box:after, .arrow_box:before {
            bottom: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .arrow_box:after {
            border-color: rgba(149, 213, 53, 0);
            border-bottom-color: red;
            border-width: 13px;
            left: 10%;
            margin-left: -13px;
        }
        .arrow_box:before {
            border-color: rgba(194, 225, 245, 0);
            border-bottom-color: #c2e1f5;
            border-width: 19px;
            left: 10%;
            margin-left: -19px;
        } 
    </style>

的Javascript

<script>                    
            function showMenu(obj){             
                var a=obj.children[0];
                a.style.color="blue";
                var div = obj.children[1];
                obj.style.backgroundColor="yellow";


                div.style.display="block";  

            }
            function hideMenu(obj){
                var a=obj.children[0];
                a.style.color="red";
                var div = obj.children[1];          
                div.style.display="none";
                obj.style.backgroundColor="";
            }   

    </script>

Answer 1

提供CSS

.arrow_box{ position:absolute; white-space:nowrap}

为什么菜单背景颜色不能改变？

1 个答案: