Почему цвет меню не изменяется?

Я создал 2 menus:prod & prod2, я нахожу, когда mouse focus on prod2, цвет фона меняется, но когда мышь фокусируется на prod1 the background color doesn't change.Почему цвет меню не изменяется?

Почему это не меняется?

Стили:

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; 
}

Сценарий:

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=""; 
}

HTML:

<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

Problem In JsFiddle

источник

2013-10-10 Harim

Вы можете сделать JSFIDDLE здесь http://jsfiddle.net/ –

Я проверил ваш код, и он сработал! какой у вас браузер? пожалуйста, поместите демо, а также добавить этот код, а

a.setAttribute('style','background-color:blue');

некоторые браузеры имеют несовместимость с element.style

источник

2013-10-10 05:29:53 Drupalist

Firefox и IE 9. – Harim

-1

Пожалуйста, проверьте HTML:

Поскольку вы выполняете ту же функцию, как для Pord or Pord2 но внутренний HTML является другой для обоих li. так function showMenu() работы различны для обоих Pord or Pord2:

HTML:

<ul class="hMenu"> 
     <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;" 
      href="javascript:void(0);">prod</a>   
      <div class="arrow_box"> 
      <br /> 
       <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> 
     </li> 
     <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;" 
      href="javascript:void(0);">prod2</a>    
      <div class="arrow_box"> 
      <br /> 
       <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>

Try This

ОБНОВЛЕНО

Положите <br /> до того arrow_box DIV для обоих li и некоторые изменения в Javascript:

var div = obj.children[2];

Javascript -

function showMenu(obj){ 
       var a=obj.children[0]; 
       a.style.color="blue"; 
       var div = obj.children[2]; 
       obj.style.backgroundColor="yellow"; 
       div.style.display="block"; 
      } 

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

Updated Jsfiddle

источник

2013-10-10 05:58:14

Я хочу добавить
, прежде чем стрелка, а не после того, как стрелки, вы можете что стрелка закрыла меню. – Harim

@ Харим: Пожалуйста, см. Обновленный ответ .. !! –

Я хочу, чтобы меню цвета земли было «красным», – Harim

отдавания CSS Понравился

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

Проверьте это

http://jsfiddle.net/zz5XJ/2/

источник

2013-10-10 06:27:11

Это новое меню, я хочу, чтобы меню itmes backgroud color было «красным» .http: //jsfiddle.net/sstong123/4w99b/4/ – Harim

попробовать ниже HTML:

  <body>   
       <ul class="hMenu">   
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"> 
         <a style="color: red;" href="javascript:void(0);">prod</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></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>  
        <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>

источник

2013-10-10 06:30:08 shemy

Ничего не изменилось ... Я хочу, чтобы меню itmes backgroud color было «красный», также стрелка не должна закрывать меню. http://jsfiddle.net/sstong123/4w99b/4 – Harim

Почему цвет меню не изменяется?

ответ

Смежные вопросы