• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

P

pixeldude

Neues Mitglied
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: 
<!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" />
<title>testnavi</title>
<style>
/* Menu*/
#menuh-container
    {
        margin-left:30px;
    }

#menuh
    {
    font-size: small;
    font-family: Helvetica, Arial, sans-serif;    float:left;
    }
        
#menuh a
    {
    text-align: left;
    display:block;
    white-space:nowrap;
    margin:0;
    margin-right:20px;
    padding-top:10px;
    padding-bottom:2px;
    border-top: 2px solid #e6e6e6;
        letter-spacing:0.1em;
        font-size:12px;
    padding-left:1px;
        padding-right:1px;
        
    }
    
    
#menuh a:link, #menuh a:visited, #menuh a:active    /* menu at rest */
    {
    color:#666;
    text-decoration:none;
    }
    
#menuh a:hover                        /* menu on mouse-over  */
    {
    color:#009790;
        border-top: 2px solid #009790;
    text-decoration:none;
    }    
    
    
#menuh ul
    {
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    
    }

#menuh li
    {
    position:relative;
    min-height: 1px;        /* Sophie Dennis contribution for IE7 */
    vertical-align: bottom;        /* Sophie Dennis contribution for IE7 */
    }

#menuh ul ul
    {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
    
    }


div#menuh li:hover
    {
    cursor:pointer;
    z-index:100;
    }
    

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;
}
/* Submenu Dropdown*/

#menuh ul ul a
    {
        font-size:12px;
        border:none;
        padding-top:2px;
        padding-bottom:2px;
    
    }


#menuh ul ul a:hover
    {
        border:none;
    }
    

    
    
</style>
</head>

<body>
 <div id="menuh-container">
<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> 
</body>
</html>
 
Werbung:
Weis zwar nicht genau was du meinst ich weis nur wie man bei mouseover die class von einem Button ändert:
Style:
HTML: 
.button_1{
blabla
}
.button_2{
blabla
}
Also ich habe einen Button der dann von dem anderen geändert werden soll:
HTML: 
<input type="text" id="button" name="button" class="button_1">
Dann der Button der den Button oben ändert:
HTML: 
<input type="text" onmouseover="button.className='button_2'">
 
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.
 
Werbung:
Hallo pixeldude,

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

Du musst lediglich diesen Codebestandteil aus deinem CSS entfernen:
HTML: 
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

Im übrigen ist es einfacher wenn dein Menü richtig strukturiert ist, dafür müsstest du dann aber auch dein CSS ändern.
Besser:
HTML: 
<div id=menu>
    <ul>     
        <li id="current"><a href="#" >button1</a>
        <li><a href="#" >button2</a>
        <li><a href="#">button3</a>
            <ul>
                <li><a href="#">button3.1</a></li>
                <li><a href="#">button3.2</a></li>
            </ul>
        </li>
    </ul>
    </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben