Sponsor-Board.de
Thema geschlossen  Thema schreiben 

CSS last-child und a:hover kombinieren?

Verfasser Nachricht

Beiträge: 287
Registriert seit: Feb 2012
Status: offline


Beitrag: #1
CSS last-child und a:hover kombinieren?

Guten Abend,

ich suche nach einer Möglichkeit, um die CSS Attribute last-child und a:hover zu kombinieren, sprich dass z.B. für den letzten Listenpunkt gilt, dass er eine andere Hintergrundfarbe bekommt bei Mouseover, als die anderen.

MfG


On the 8th day, god created Linux.

25.11.2012 17:11
 
Alle Beiträge dieses Benutzers finden

Beiträge: 3.413
Bewertung: 33
Registriert seit: Oct 2010
Status: offline


Beitrag: #2
RE: CSS last-child und a:hover kombinieren?

ohne deine genaue Struktur zu kennen, vllt : ul li:last-child a:hover ?


Portfolio: [Link: Registrierung erforderlich]

Projekte
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]

25.11.2012 17:18
 
Alle Beiträge dieses Benutzers finden

Beiträge: 196
Bewertung: 20
Registriert seit: Aug 2012
Status: offline


Beitrag: #3
RE: CSS last-child und a:hover kombinieren?

Jop so würde ich es auch machen Wink


[Link: Registrierung erforderlich]

25.11.2012 17:27
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden

Beiträge: 287
Registriert seit: Feb 2012
Status: offline


Beitrag: #4
RE: CSS last-child und a:hover kombinieren?

Danke, so hat es geklappt, fragt sich nur wieso ich nicht darauf gekommen bin ^^.
Jetzt stellt sich mir ein weiteres Problem...

Code:
nav {
    margin: auto;
    text-align: center;
    z-index: 5;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {  
    list-style: none;
    position: relative;
    display: inline-table;
    
}


    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
        
    }
            nav ul li:hover a {
                color: #fff;
            }
        
        nav ul li a {
            display: block; padding: 0px 0px;
            color: white; text-decoration: none;
        }
            
        
    nav ul ul {
        background:#003668 ; border-radius: 10px; padding-top: 14px;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none;
            border-top: 1px solid #06C;
            border-bottom: 1px solid #06C; position: relative;
        }
        
        nav ul ul li a:hover {
            background: #034683;
            text-decoration:none;        
        }
        
        nav ul ul li:last-child {
            border-bottom: none;
            
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }    
                nav ul ul li:last-child a:hover {
                    background: #034683;
                    text-decoration:none;
                    -webkit-border-bottom-right-radius: 10px;
                    -webkit-border-bottom-left-radius: 10px;
                    -moz-border-radius-bottomright: 10px;
                    -moz-border-radius-bottomleft: 10px;
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                    
                }
                
        
    nav ul ul ul {
        position: absolute; left: 100%; top:0;
        margin-top: -16px;
    }
    
    nav ul ul ul li {
        overflow:hidden;
    }
    
    nav ul ul ul li a:hover {
        border-radius: 0px;
    }
    
    nav ul ul ul li:first-child {
        border-top: 2px solid #06C;
    }


Das ist mein CSS-Part, und das mein HTML:

Code:
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Linux</a></li>
                <li><a href="#">Windows</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
                <li><a href="#">awdawdawdawdwadawdawdawd</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Mitglieder</a>
            <ul>
                <li><a href="#">Autoren</a></li>
                <li><a href="#">Alle Mitlgieder</a></li>
            </ul>
        </li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Videos</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Hilfe</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Team</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Sponsoren</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Partner</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">&Uuml;ber uns</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Banner</a></li>
        <li><div style="width:20px;">&nbsp;</div></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>


Leider passiert dann das hier:

http://s1.directupload.net/images/121125/idls4vvv.png(!https)

Bei den Menüpunkten HTML und CSS werden ebenfalls die Ecken abgerundet, was allerdings nur beim untersten so sein soll.
Wie kann ich diesen Fehler beheben?

MfG


On the 8th day, god created Linux.

Dieser Beitrag wurde zuletzt bearbeitet: 25.11.2012 21:02 von Mr-Trust.

25.11.2012 21:01
 
Alle Beiträge dieses Benutzers finden
- # PUSH # - 26.11.2012 - 18:31 Uhr -
Thema geschlossen  Thema schreiben 

Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  Hover definieren BT-Creative.de 3 1.302 30.03.2016 08:05
Letzter Beitrag: Dennis
  Farblos, beim Hover mit Farbe (PHP, jQuery) Aaron 4 1.266 03.10.2012 21:47
Letzter Beitrag: Aaron
  CSS Hover bei Texten uBasis 5 1.294 15.05.2011 13:15
Letzter Beitrag: uBasis

 Druckversion anzeigen
 Thema einem Freund senden
 Thema abonnieren
 Thema zu den Favoriten hinzufügen

Sponsor-Board.de

Community
Über uns
Partner
Powered by Mybb: Copyright 2002-2024 by MyBB Group - Deutsche-Übersetzung von Mybb.de
 
© 2007-2024 Sponsor-Board.de - Hosted by OVH

Willkommen auf SB!   Sie benötigen ein Sponsoring?   1. Anmelden   2. Sponsoring-Anfrage erstellen   3. Nachrichten von Sponsoren erhalten   Kostenlos!   Jetzt registrieren