[CSS WBB 4] Custom Hover effekt scheitert bei :not(:first-child)

TheRhyme · 12. Juni 2017

Hallo,

ich kenne mich eigentlich recht gut mit CSS aus dennoch nicht perfekt.

Mein folgendes Problem ist das ich gerade für mein Projekt Fallout SanAndreas für unseres Forum ein Custom Hover Effekt machen möchte:

CSS

.userPanel > div > ul.userPanelItems > li > a:after:not(:first-child){
	/* code */
}
.userPanel > div > ul.userPanelItems > li > a:hover:after:not(:first-child) {
	/* code */
}

Aufjedenfall möchte ich das in der Navbar das Profil nicht mit diesen Hover Effekt beschmückt wird und deshalb wende ich :not(:first-child) an dennoch funktioniert es nicht und jedes "Item" funktioniert nicht mehr.

Hat jemand evtl. eine gute Lösung ?

MfG

Edgar · 12. Juni 2017

Falsche Reihenfolge, würde ich behaupten:

a:not(:first-child):hover:after

Wenn das nicht klappt, wäre eine Live-Ansicht nicht schlecht, dann könnte ich mir das genauer ansehen.

Syno · 12. Juni 2017

Ich gehe davon aus, dass es nicht -> "nicht das erste a" sondern "nicht das a in dem ersten li" sein soll, also in diese Richtung:

Code

.userPanel > div > ul.userPanelItems > li:not(:first-child) > a:after{

TheRhyme · 12. Juni 2017

Zitat von Cireyses

Falsche Reihenfolge, würde ich behaupten:

a:not(:first-child):hover:after

Wenn das nicht klappt, wäre eine Live-Ansicht nicht schlecht, dann könnte ich mir das genauer ansehen.

Alles anzeigen

Hallo,

danke für die Antwort dennoch hab ich dies schon probiert und es macht keinen Unterschied.

Eine Live Ansicht kann ich zurzeit nicht bieten ( Ist Wbb 4 und die Standart Navbar ).

MfG

Fancy · 13. Juni 2017

Hab das persönlich mit :not auch nicht hinbekommen.
Im schlimmsten Fall kannst dus ja so machen
https://codepen.io/anon/pen/BZzwoq

Edgar · 13. Juni 2017

@Fancy

Code

ul li {
  display: inline-block;
  background: #000;
  padding: 5px 10px;
  a {
    color: #fff;
  }
  &:not(:first-child):hover {
    background: #fff;
  }
}

Alles anzeigen

So hätte es funktioniert

TheRhyme · 14. Juni 2017

Falls jemand den gleichen Fehler hat / bekommt:

Code

.userPanel > div > ul.userPanelItems > li:not(#userMenu) > a:after{

Funktioniert bei mir relative Gut.

MfG

#close

breadfish.de 12. März 2022