Background-color, nur wenn aktives Listenelement

[pto]

Hallo, ich kenne mich in CSS noch nicht soooo aus. Ich habe jetzt:

.sb-left .sb-menu li a:hover {  
	border-left: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */  
	background-color: rgba(0,030,0,0.5);  /*Will lighten any background colour you set. */  
	  
}  
  
.sb-left .sb-menu .aktiv li  a:hover {  
	border-left: 3px solid;  
		background-color: #fff;  
	  
}

Damit wollte ich, dass das Seitennavi-Listenelement der jeweils aktiven Seite, das einen weißen Hintergrund  hat (die anderen haben eine schwarzen) auch beim hover weiß bleibt. Die Klasse ist "aktiv". Hab ich was in der Syntax falsch gemacht, beim hover wird es jedenfalls schwarz.

Gruß

[M.]

Mahlzeit,

Das hier

.sb-left .sb-menu li a:hover {

ist was völlig anderes als

.sb-left .sb-menu .aktiv li  a:hover {

das hier.

Aber ohne zugehörigen HTML-Code ist es völlig unmöglich zu sagen, wo das Problem liegt.

Aber so nebenbei, du hast nirgends ein :active, also halte ich es für unmöglich, dass etwas aktives die Farbe wechselt.

[pto]

Sorry, habe mich falsch ausgedrückt.

die Listen-Elemente der Seiten-Navigation haben generell einen schwarzen Hintergrund mit Texten in weißer Schrift. Das Element, das die gerade aktive Seite anzeigt (z.B. "Home") soll einen weißen Hintergrund haben und schwarze Schrift. Dazu habe ich die Klasse "aktiv" definiert, so dass das Listenelement die Klasse "aktiv" bekommt. Nun soll dieses Element auch beim :hover weiß bleiben, wird aber dunkel, was ich nicht verstehe. Das will ich verhindern. Hier das HTML:

		<!-- Left Slidebar -->  
		<div class="sb-slidebar sb-left">	  
			  
			<!-- Lists in Slidebars -->  
			<ul class="sb-menu">  
				<li><a class="aktiv" href="#">Home</a></li>  
				<!-- First Dropdown Menu -->  
				  

CSS:

  
.aktiv  
{ background: #fff;  
  color: #000 !important;  
  width: 6.795em;  
}  

[M.]

Mahlzeit,

	<!-- Left Slidebar -->  

  <div class="sb-slidebar sb-left">	  
  	  
  	<!-- Lists in Slidebars -->  
  	<ul class="sb-menu">  
  		<li><a class="aktiv" href="#">Home</a></li>  
  		<!-- First Dropdown Menu -->  

  
Du schreibst im OP:  
  
.sb-left .sb-menu .aktiv li  a:hover {  
  
dein HTML verlangt aber nach:  
  
.sb-left .sb-menu li .aktiv a:hover {  
  
Die Reihenfolge ist extrem entscheidend.  
Ob das dein Problem löst, weiss ich nicht, aber es behebt einen Fehler.  

-- 
42

[Tabellenkalk]

Hallo,

dein HTML verlangt aber nach:

.sb-left .sb-menu li .aktiv a:hover {

Gibt es da wirklich ein a-Element innerhalb eines Elements mit der Klasse .aktiv?

Gruß
Kalk

[M.]

Mahlzeit,

.sb-left .sb-menu li .aktiv a:hover {

Gibt es da wirklich ein a-Element innerhalb eines Elements mit der Klasse .aktiv?

Stimmt. sollte dann eher so heissen:

.sb-left .sb-menu li .aktiv:hover {

Wobei ich mir nicht sicher bin, ob ich ein Pseudeoelement an einen Klasse anhängen kann. Aber ich würde jezt sagen, es geht ;)

[Gunnar Bittersmann]

@@M.:

nuqneH

Stimmt. sollte dann eher so heissen:

.sb-left .sb-menu li .aktiv:hover {

Eher nicht. Überspezifiziert. Selektoren sollten so kurz wie möglich, so lang wie nötig sein.

li ist mit Sicherheit überflüssig. .sb-left vermutlich auch.

Sollte eher so heißen: .sb-menu .aktiv:hover { … }

Wobei ich mir nicht sicher bin, ob ich ein Pseudeoelement an einen Klasse anhängen kann.

Zum einen ist :hover kein Pseudoelement, sondern eine Pseudoklasse. Zum anderen: ja, geht.

Qapla'

[pto]

Sollte eher so heißen: .sb-menu .aktiv:hover { … }

das habe ich versucht, funktioniert aber nicht wie gewünscht. Also bei im webdeveloper wird über das gewünschte Element folgendes gesagt~~~html body>
div.sb-slidebar.sb-left>
ul.sb-menu>
li>
a.aktiv

  
im css habe ich geschrieben:  
~~~css
.sb-menu .aktiv:hover {  
	width: 100%;  
        display: inline-block;  
	background-color:#fff  
	color:#000;  
	......  
}

Dennoch wird der Menüpunkt beim hover schwarz statt weiß.

http://nachrichtentisch.de/test2.php ---dort linkes Slidebar - Menü....

[Matthias Apsel]

Om nah hoo pez nyeetz, pto!

im css habe ich geschrieben:

.sb-menu .aktiv:hover {

width: 100%;
        display: inline-block;
background-color:#fff
color:#000;
......
}

> Dennoch wird der Menüpunkt beim hover schwarz statt weiß.  
  
weil gilt:  
~~~css
.sb-left .sb-menu li a:hover {  
    background-color: rgba(0, 30, 0, 0.5);  
}

2 Klassenselektoren, 2 Elementselektoren und 1 Pseudoklasse sind nun mal „stärker“ als 2 Klassenselektoren und 1 Pseudoklasse. siehe wiki/CSS/Kaskade oder auch in lustig

Matthias

[pto]

Om nah hoo pez nyeetz, pto!

im css habe ich geschrieben:

.sb-menu .aktiv:hover {

width: 100%;  

display: inline-block;
background-color:#fff
color:#000;
......
}

> > Dennoch wird der Menüpunkt beim hover schwarz statt weiß.  
>   
> weil gilt:  
> ~~~css

.sb-left .sb-menu li a:hover {  

>     background-color: rgba(0, 30, 0, 0.5);  
> }

2 Klassenselektoren, 2 Elementselektoren und 1 Pseudoklasse sind nun mal „stärker“ als 2 Klassenselektoren und 1 Pseudoklasse. siehe wiki/CSS/Kaskade oder auch in lustig

Matthias

Danke!
Darum war ja meine Ursprungsfrage auch, wie ich da jetzt noch am geschicktesten eine Spezifikation für die Klasse .aktiv einfüge.

[Matthias Apsel]

Om nah hoo pez nyeetz, pto!

weil gilt:

.sb-left .sb-menu li a:hover {

background-color: rgba(0, 30, 0, 0.5);
}

> > 2 Klassenselektoren, 2 Elementselektoren und 1 Pseudoklasse sind nun mal „stärker“ als 2 Klassenselektoren und 1 Pseudoklasse. siehe [wiki/CSS/Kaskade](http://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t_der_Regels.C3.A4tze) oder auch [in lustig](http://www.standardista.com/css3/css-specificity/)  
  

> Darum war ja meine Ursprungsfrage auch, wie ich da jetzt noch am geschicktesten eine Spezifikation für die Klasse .aktiv einfüge.  
  
~~~css
.sb-left .sb-menu li .aktiv:hover  

ist zielführend. Wenn du dein CSS nicht komplett umbauen möchtest, ist es wohl auch am geschicktesten.

Matthias

[pto]

Om nah hoo pez nyeetz, pto!

.sb-left .sb-menu li .aktiv:hover

> ist zielführend. Wenn du dein CSS nicht komplett umbauen möchtest, ist es wohl auch am geschicktesten.  
>   
>   
> Matthias  
  
tlho' tlho'  
  
(zwei Kollegen von mir haben übrigens öfter mal Klingonen - oder Brückenoffiziere synchronisiert - das nur so zum Angeben)  
  
ALso Gruß und Dank für das Licht im Dschungel der css-Syntax.

[M.]

Mahlzeit,

tlho' tlho'

Ein Klingone, der sich bedankt? Mal was neues :D

[M.]

Mahlzeit,

Eher nicht. Überspezifiziert. Selektoren sollten so kurz wie möglich, so lang wie nötig sein.

Genau wie der Rest vom CSS und daher ist meine Version zumindest funktionsfähig, deine nur mit einem !important dahinter.

[MrMurphy]

Hallo

Damit wollte ich, dass das Seitennavi-Listenelement der jeweils aktiven Seite, ...

Da liegt wohl ein Mißverständnis vor. :active ist der Zustand, wenn ein Element angeklickt wird. Also der Zeitraum vom Drücken der Maustaste bis sie wieder losgelassen wird.

In CSS gibt es (leider) keine Möglichkeit die aktuell angezeigte Seite zu "greifen". Das ist nur über Umwege möglich.

Gruss

MrMurphy

[MudGuard]

Hi,

»» .sb-left .sb-menu .aktiv li  a:hover {

border-left: 3px solid;
background-color: #fff;

}

>   
> Damit wollte ich, dass das Seitennavi-Listenelement der jeweils aktiven Seite, das einen weißen Hintergrund  hat (die anderen haben eine schwarzen) auch beim hover weiß bleibt. Die Klasse ist "aktiv".  
  
Wie so oft: CSS ohne das zugehörige HTML ist wenig aussagekräftig.  
  
Vermutlich ist die Klasse im li?  
Dein CSS formatiert aber li-Elemente, die innerhalb eines Elements mit der Klasse "aktiv" liegen.  
li.aktiv wäre vermutlich eher zutreffend.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.