1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

Hover Effekt für übergeordnetes li anwenden bei MouseOver untergeordneten li im Drop

Dieses Thema im Forum "CSS" wurde erstellt von pixeldude, 1 Dezember 2011.

  1. pixeldude

    pixeldude Neues Mitglied

    Registriert seit:
    10 April 2011
    Beiträge:
    4
    Punkte für Erfolge:
    0
    Hallo zusammen,

    ich habe ein Problem und bin glaube ich gerade einfach zu blind.
    Ich möchte das beim Mouse over über Button3.1 (bzw Button3.2)
    die obere Border vom Button3 ebenfalls grün bleibt.

    Also wie beim MouseOver der MainButtons nur soll in diesem Fall nicht der Text des MainButtons grün sein.


    Bin für jede Hilfe dankbar.

    MfG Pixeldude

    Code (text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <title>testnavi</title>
    7. <style>
    8. /* Menu*/
    9. #menuh-container
    10.     {
    11.         margin-left:30px;
    12.     }
    13.  
    14. #menuh
    15.     {
    16.     font-size: small;
    17.     font-family: Helvetica, Arial, sans-serif;    float:left;
    18.     }
    19.        
    20. #menuh a
    21.     {
    22.     text-align: left;
    23.     display:block;
    24.     white-space:nowrap;
    25.     margin:0;
    26.     margin-right:20px;
    27.     padding-top:10px;
    28.     padding-bottom:2px;
    29.     border-top: 2px solid #e6e6e6;
    30.         letter-spacing:0.1em;
    31.         font-size:12px;
    32.     padding-left:1px;
    33.         padding-right:1px;
    34.        
    35.     }
    36.    
    37.    
    38. #menuh a:link, #menuh a:visited, #menuh a:active    /* menu at rest */
    39.     {
    40.     color:#666;
    41.     text-decoration:none;
    42.     }
    43.    
    44. #menuh a:hover                        /* menu on mouse-over  */
    45.     {
    46.     color:#009790;
    47.         border-top: 2px solid #009790;
    48.     text-decoration:none;
    49.     }    
    50.    
    51.    
    52. #menuh ul
    53.     {
    54.     list-style:none;
    55.     margin:0;
    56.     padding:0;
    57.     float:left;
    58.    
    59.     }
    60.  
    61. #menuh li
    62.     {
    63.     position:relative;
    64.     min-height: 1px;        /* Sophie Dennis contribution for IE7 */
    65.     vertical-align: bottom;        /* Sophie Dennis contribution for IE7 */
    66.     }
    67.  
    68. #menuh ul ul
    69.     {
    70.     position:absolute;
    71.     z-index:500;
    72.     top:auto;
    73.     display:none;
    74.     padding: 1em;
    75.     margin:-1em 0 0 -1em;
    76.    
    77.     }
    78.  
    79.  
    80. div#menuh li:hover
    81.     {
    82.     cursor:pointer;
    83.     z-index:100;
    84.     }
    85.    
    86.  
    87. div#menuh li:hover ul ul,
    88. div#menuh li li:hover ul ul,
    89. div#menuh li li li:hover ul ul,
    90. div#menuh li li li li:hover ul ul
    91. {display:none;}
    92.  
    93. div#menuh li:hover ul,
    94. div#menuh li li:hover ul,
    95. div#menuh li li li:hover ul,
    96. div#menuh li li li li:hover ul
    97. {display:block;
    98. }
    99. /* Submenu Dropdown*/
    100.  
    101. #menuh ul ul a
    102.     {
    103.         font-size:12px;
    104.         border:none;
    105.         padding-top:2px;
    106.         padding-bottom:2px;
    107.    
    108.     }
    109.  
    110.  
    111. #menuh ul ul a:hover
    112.     {
    113.         border:none;
    114.     }
    115.    
    116.  
    117.    
    118.    
    119. </style>
    120. </head>
    121.  
    122. <body>
    123.  <div id="menuh-container">
    124. <div id="menuh">
    125.     <ul>    
    126.         <li id="current"><a href="#" >button1</a>
    127.     </ul>
    128.     <ul>    
    129.         <li><a href="#" >button2</a>
    130.     </ul>    
    131.     <ul>
    132.         <li><a href="#">button3</a>
    133.         <ul>
    134.             <li><a href="#">button3.1</a></li>
    135.             <li><a href="#">button3.2</a></li>
    136.         </ul>
    137.         </li>
    138.     </ul>
    139.  
    140.  
    141.  
    142.    
    143. </div>
    144. </body>
    145. </html>
    146.  
    147.  
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. Minecraft

    Minecraft Neues Mitglied

    Registriert seit:
    1 Dezember 2011
    Beiträge:
    3
    Punkte für Erfolge:
    0
    Weis zwar nicht genau was du meinst ich weis nur wie man bei mouseover die class von einem Button ändert:
    Style:
    HTML:
    1. .button_1{
    2. blabla
    3. }
    4. .button_2{
    5. blabla
    6. }
    7.  
    Also ich habe einen Button der dann von dem anderen geändert werden soll:
    HTML:
    1. <input type="text" id="button" name="button" class="button_1">
    Dann der Button der den Button oben ändert:
    HTML:
    1. <input type="text" onmouseover="button.className='button_2'">
  3. pixeldude

    pixeldude Neues Mitglied

    Registriert seit:
    10 April 2011
    Beiträge:
    4
    Punkte für Erfolge:
    0
    HI Minekraft,
    danke für Antwort.
    aber ichhabe mich wohl etwas unverständlcih ausgedrückt.
    Es handelt sich dabei um ein horizobntales dropdown menu, das über ul li definiert wird.


    <div id="menuh">
    <ul>
    <li id="current"><a href="#" >button1</a>
    </ul>
    <ul>
    <li><a href="#" >button2</a>
    </ul>
    <ul>
    <li><a href="#">button3</a>
    <ul>
    <li><a href="#">button3.1</a></li>
    <li><a href="#">button3.2</a></li>
    </ul>
    </li>
    </ul>
    </div>


    denke auch das man das über ne neue class regeln muss ...
    ... komme aber selber im moment nicht drauf.
  4. Minecraft

    Minecraft Neues Mitglied

    Registriert seit:
    1 Dezember 2011
    Beiträge:
    3
    Punkte für Erfolge:
    0
    aso ich dann überlege nochmal :D
  5. Wustersoss

    Wustersoss Guest

    Hallo pixeldude,

    du hast dein Menü ja ganz schön kaputt gespielt.

    Du musst lediglich diesen Codebestandteil aus deinem CSS entfernen:
    HTML:
    1.  
    2. div#menuh li:hover ul ul,
    3. div#menuh li li:hover ul ul,
    4. div#menuh li li li:hover ul ul,
    5. div#menuh li li li li:hover ul ul
    6. {display:none;}
    7.  
    Im übrigen ist es einfacher wenn dein Menü richtig strukturiert ist, dafür müsstest du dann aber auch dein CSS ändern.
    Besser:
    HTML:
    1.  
    2. <div id=menu>
    3.     <ul>    
    4.         <li id="current"><a href="#" >button1</a>
    5.         <li><a href="#" >button2</a>
    6.         <li><a href="#">button3</a>
    7.             <ul>
    8.                 <li><a href="#">button3.1</a></li>
    9.                 <li><a href="#">button3.2</a></li>
    10.             </ul>
    11.         </li>
    12.     </ul>
    13.     </div>
    14.  

Diese Seite empfehlen