Logischer fehler?

[CutePro]

Hallo :),

Die ist mein CSS-Code

#mood img {
  width: 35px;
  padding: 10px;
  opacity: 0.5;
}

#mood img:hover {
  width: 40px;
  padding: 7.5px;
  opacity: 1.0;
}

.activemood {
    width: 40px;
    opacity: 1.0;
    padding: 7.5px;    
}

#mood normal ist ein Kasten mit einem Rahmen.
Darin die images werden das was in "#mood img" steht.
Wenn man über die images drüberfährt passiert das was in
"#mood img:hover" steht, Verständlich.

Sage ich jedoch dem <img>-Tag noch mit dem Attribut "class="activemood"" kommt nicht dass was in ".activemood"
drinsteht.
Was kann ich tun?

MfG

 

[threadi]

Die Nutzung von einer ID wie #mood überschreibt die Eigenschaften einer Klasse wenn letztere sich nicht in einer tieferliegenden Ebene befindet. Schreib also:

#mood .activemood {...

damit die Klasse sich innerhalb der ID befindet und dessen Eigenschaften überschreibt.

 

[neuroleptika]

opacity: 1.0; bedeutet Volldeckend . Das bewirkt im besten Fall nichts.
Wenn du damit versuchst Opacity rückgängig zu machen:
Das geht nicht.

 

[CutePro]

Die Nutzung von einer ID wie #mood überschreibt die Eigenschaften einer Klasse wenn letztere sich nicht in einer tieferliegenden Ebene befindet. Schreib also:

#mood .activemood {...

damit die Klasse sich innerhalb der ID befindet und dessen Eigenschaften überschreibt.

Vielen Dank, es funktioniert.
Ich habe es jetzt jedoch unprofessioneller gelöst, was ich schnell
rückgängig machen will, also ich habe per "style="-Attribut dem Bild
die Werte zugewiesen.

MfG