對該
  • 操作" type="hidden"/>

    如何讓
  • 中的對該
  • 操作

  • 如題  在做下拉菜單時候 無法使主菜單的顏色改變
    貼一下代碼:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 

    <head>
        <style type="text/css">
            *
            {
                 width:50px;
                 height:30px;
                }
           #main li ul
            {
                            text-align:center;
                            background-color: Gray;
                           
                            list-style: none;
                            padding: 0px;
                            
                            display:none;
                            margin-top:12px;
            }
            #main
            {
                 text-align:center;
                }
            #main li
            {
                  background-color:ButtonFace;
                  list-style:none;
                }
         
                
            
        </style>
        <script type="text/javascript">
            function mouseover(li) {
                var pp =li.getElementsByTagName("ul")[0];
                pp.style.display = "block";

            }
            function mouseout(li) {
                var pp =li.getElementsByTagName("ul")[0];
                pp.style.display = "none";
            }
            function mover(li) {
                li.style.background = "Red";
            }

            function mout(li) {
                li.style.background = "ButtonFace";
            }
     
        </script>
    </head>
    <body>
       <ul id="main">
            <li onmouseover="mouseover(this),mover(this)" onmouseout="mouseout(this),mout(this)">
                <a href="#">1</a>
                 <ul>
                        <li onmouseover="mover(this)" onmouseout="mout(this)"><a href="#">11</a></li>
                        <li onmouseover="mover(this)" onmouseout="mout(this)"><a href="#">12</a></li>
                  </ul>
            </li>
       </ul>
    </body>





    ////////////////////////////////////////////////////////////////////////////////////////////////
    我是將主菜單下的子菜單設置在一個<ul>下 並且所有菜單都在一個<ul>下
    這樣導致在子菜單下移動時主菜單的背景顏色不改變啊
    用a:hover也智能改變連接字體的顏色啊
    各位高手幫忙看下 

    5 个解决方案

    #1


    這樣導致在子菜單下移動時主菜單的背景顏色不改變啊
    re:
    因為在移到子菜時,焦點還是在主菜單的事件內

    用a:hover也智能改變連接字體的顏色啊
    re:
    這個什么意思

    #2


    引用 1 樓 xiaofanku 的回復:
    這樣導致在子菜單下移動時主菜單的背景顏色不改變啊
    re:
    因為在移到子菜時,焦點還是在主菜單的事件內

    用a:hover也智能改變連接字體的顏色啊
    re:
    這個什么意思

    就是用a:hover 也只能改變帶有鏈接的那個字體顏色啊,

    #3


    這種不局不太好搞。這種不行嗎?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <title>無標題文檔</title>
    <style type="text/css">
    #main{width:300px;height:40px;line-height:40px;}
    #main dd{float:left;padding:0 10px 0 0;height:40px;line-height:40px;text-align:center;}
    label.topguide{position:relative;display:block;}
    .node{
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-position: right -425px;
        z-index:3;
        display:block;
        position:absolute;
        top:0;
        width:70px;
        left:0;
    }
    .focus{
        background-color:#fff;
        border-width: 1px 1px medium;
        color:#333!important;
        border-color: #07A6EC #07A6EC -moz-use-text-color;
        border-style: solid solid none;
        border: 1px solid #07A6EC;
        border-bottom: none;
    }
    .topguide ul{
        float:left;
        width:100px;
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #07A6EC;
        display: none;
        position: absolute;
        left:0;
        top: 40px;
        z-index: 1;
    }
    .topguide ul li{float:left;width:100px;height:30px;line-height:30px;}
    .topguide ul li a{color:#333!important;}
    .node:hover,.topguide ul li:hover{background-color:#F2F7FC;}
    .topguide ul li:hover a{color:#f00!important;}
    </style>
    </head>
    <body>
       <div id="main">
         <dl>
          <dd>
            <label class="topguide">
    <a class="node" href="">1</a>
    <ul>
        <li><a href="">11</a></li>
        <li><a href="">22</a></li>
        <li><a href="">33</a></li>
        <li><a href="">44</a></li>
    </ul>
            </label>
            </dd>
         
         </dl>   

       </div>
    </body>


    <script type="text/javascript">$('.topguide').hover(function(){$(this).find('a.node').addClass('focus');$(this).find('ul').show();},function(){$(this).find('a.node').removeClass('focus');$(this).find('ul').hide();});</script>
    </html>

    #4


    多謝了 我看看

    #5


    改變字體顏色應該是color、另外你用的是background—color,應該把li的display設成block

    注意!

    本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



  • when href is empty 首頁
  • 1
  • 變成字符串">有辦法將
  • 首頁
  • 1
  • 變成字符串 如何用js實現單擊一個li,就執行里面的標簽中href的鏈接 在一個ul中添加新的li,在li中添加文本框並且進行刪除操作 jquery點擊li觸發a鏈接href事件 CSS - li a href parent is smaller than child link a href background size in an inline li jquery點擊li觸發a鏈接href事件
  • ...
  • 中添加鏈接?
    的href">設置div中的href
     
      © 2014-2022 ITdaan.com 联系我们: