a:link ... a:focus auch mit Bildbuttons???

[chris]

Hi liebes Forum!
Habe da mal so eine Frage!
Es gibt ja eine Möglichkeit in css 5 verschiedene Tex-Link-Zustände
zu bauen per
a:link { ...  }
a:visited { ...  }
a:hover{ ...  }
a:active { ...  }
a:focus { ...  }
Meine Frage nun lautet: Geht das auch mit Bild-Buttons und nur mit css?

Danke, gruß Chris

[timex]

hallo chris,

die reihenfolge der pseudoklassen muss wie folgt sein:

a:link, a:visited, a:focus, a:hover, a:active {
 color: #000080;
}

um eine mouseover zu erzeigen, kannst du das wie folgt trennen:

a:link, a:visited, a:focus {
 color: #000080;
}

a:hover, a:active {
 color: #EFEFEF;
}

das erweiterst du dann mit entsprechenden css-attributen wie background, border, etc.

gruesse, timex

[Ingo Turski]

Hi,

die reihenfolge der pseudoklassen muss wie folgt sein:

muß sie nicht - sie sollte so sein, daß der gewünschte Effekt erzielt wird und dieser kann durchaus anders sein, als Du Dir das vorstellst.

Aber zur Frage: Ja, auch mit Bildern ist das möglich, allerdings nur über eine Definition als Hintergrundbild, da die Pseudoklassen keine im Vordergrund eingebundene Elemente austauschen können.

freundliche Grüße
Ingo

[Orlando]

Hi Ingo,

Ja, auch mit Bildern ist das möglich, allerdings nur über eine Definition als Hintergrundbild, da die Pseudoklassen keine im Vordergrund eingebundene Elemente austauschen können.

na, das wollen wir doch mal sehen:

http://skop.net/self/css_hover_content.htm

Opera 7 empfohlen ;-)

Grüße,
 Roland

[MudGuard]

Hi,

na, das wollen wir doch mal sehen:
http://skop.net/self/css_hover_content.htm
Opera 7 empfohlen ;-)

Da hat der Opera 7 eindeutig einen Fehler, wenn er das macht.
Die Eigenschaft content ist ausdrücklich auf die Pseudo-Elemente :before und :after eingeschränkt:

siehe http://www.w3.org/TR/REC-CSS2/generate.html#propdef-content, wo es heißt:

'content'
    Value:   [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
    Initial:   empty string
    Applies to: :before and :after pseudo-elements

cu,
Andreas

[Orlando]

Hi Andreas,

http://skop.net/self/css_hover_content.htm

Da hat der Opera 7 eindeutig einen Fehler, wenn er das macht.

warum habe ich gewusst, dass dieser Einwand kommen würde? Wenn du das so siehst, dann definiere bitte "falsch".

Die Eigenschaft content ist ausdrücklich auf die Pseudo-Elemente :before und :after eingeschränkt:

siehe http://www.w3.org/TR/REC-CSS2/generate.html#propdef-content, wo es heißt:

'content'
   Value:      [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
   Initial:    empty string
   Applies to: :before and :after pseudo-elements

Mit CSS3 wird content: in allen Elementen erlaubt sein.

http://www.w3.org/TR/css3-content/#inserting3

Name:        content
Value:       [ <uri> ',' ]* [ normal | none | inhibit | <content-list> ]
Initial:     normal
Applies To:  all elements, ::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, and @footnote areas

<content-list> [ ... | <string> | ... ]

Grüße,
 Roland

[MudGuard]

Hi,

warum habe ich gewusst, dass dieser Einwand kommen würde? Wenn du das so siehst, dann definiere bitte "falsch".

Ok, CSS 3 hab ich nicht berücksichtigt - dieser Teil von CSS3 ist aber auch bis jetzt nur ein Arbeitsentwurf...

cu,
Andreas

[Orlando]

Hi Chris,

Es gibt ja eine Möglichkeit in css 5 verschiedene Tex-Link-Zustände
Meine Frage nun lautet: Geht das auch mit Bild-Buttons und nur mit css?

http://aktuell.de.selfhtml.org/artikel/css/mouseover/
 http://css.fractatulum.net/sample/hov1format.htm
 http://css.fractatulum.net/sample/hov2format.htm
 http://css.fractatulum.net/sample/hov2format2.htm

Mit :hover sind noch ganz andere Spielereien möglich, das reicht von

http://aktuell.de.selfhtml.org/tippstricks/css/infobox/ bis
 http://meyerweb.com/eric/css/edge/menus/demo.html

Grüße,
 Roland