A:Hover auch für DIV's?

[michel]

hallo forumler,

ist es möglich, einen hover-effekt wie bei links auch für ganze div zu erzielen?
ich habe bspw. eine ebene definiert:
#boxtop #menut { float: right; width:20%; height: 10%; border-left: 1px solid black; border-bottom: 1px solid black; background: #fff; font-weight: bold}
kann man da einen hover effekt erzielen?
bpw. wechsel der HG-Farbe?

ich habe mal einfach A:hover.#boxtop #menut {..} versucht, aber da hat sich nicht allzuviel getan... geht es denn überhapt?
und wenn ja: wie?

vielen dank  & grüße

michel

[Fabian Transchel]

hallo forumler,

moinsen

ist es möglich, einen hover-effekt wie bei links auch für ganze div zu erzielen?
ich habe bspw. eine ebene definiert:
#boxtop #menut { float: right; width:20%; height: 10%; border-left: 1px solid black; border-bottom: 1px solid black; background: #fff; font-weight: bold}
kann man da einen hover effekt erzielen?
bpw. wechsel der HG-Farbe?

ich habe mal einfach A:hover.#boxtop #menut {..} versucht, aber da hat sich nicht allzuviel getan... geht es denn überhapt?
und wenn ja: wie?

nein, das geht leider noch nicht, soll aber meines wissens bald von W3C in css 3 oder spätestens 4 gemacht werden.
ich muss dir zustimmen, das wäre ein großartiges features, gerade für dhtml ohne js, aber es geht noch nicht, deswegen musst du die schulmethode, spricht onMouseOver/onMouseOut verwenden, kannst damit dann die <div>-class wechseln, was im endeffekt wie ein hover aussieht, aber halt nur mit js funktioniert

vielen dank  & grüße

michel

Fabian

[michel]

hi fabian,

danke für deine antwort...
hast du zufällig einen link dazu an der hand oder weißt du wie man das so knapp als möglich realisieren kann? das div auf onmouseout/over zu wechseln?

viele grüße michel

[Fabian Transchel]

hi fabian,

danke für deine antwort...
hast du zufällig einen link dazu an der hand oder weißt du wie man das so knapp als möglich realisieren kann? das div auf onmouseout/over zu wechseln?

mhh, das allerkannpste, was mir so einfällt wäre folgendes:

<script type="text/javascript">
function divan()
{
document.getElementById("div").style.sonstwas = "neues_attribut";
}

function divaus()
{
document.getElementById("div").style.sonstwas = "altes_attribut";
}
</script>

<div onMouseOver="divan(); " onMouseOut="divaus(); " id="div">
Contents
</div>

viele grüße michel

Fabian

[SabineP]

hi fabian,

danke für deine antwort...
hast du zufällig einen link dazu an der hand oder weißt du wie man das so knapp als möglich realisieren kann? das div auf onmouseout/over zu wechseln?

viele grüße michel

Hallo Michel, ich glaube ich kenne dazu einen Link :-)

http://w3c.org/

Die blaue Navigationsleiste oben.
Die Navigation funktioniert sogar im Netscape 4,
natürlich ohne hover-Effekt.

Grüße von Sabine

[AndreasW]

hallo forumler,
moinsen
ist es möglich, einen hover-effekt wie bei links auch für ganze div zu erzielen?

Ja. Aber nur in ganz modernen Browsern (Mozilla 1.0)

ich habe mal einfach A:hover.#boxtop #menut {..} versucht, aber da hat sich nicht allzuviel getan... geht es denn überhapt?

So kann das auch nicht gehen.
Was soll denn .# bitte bedeuten?
Klassennamen (die nach einem Punkt kommen) dürfen nicht mit # beginnen.
Und wenn es sich um eine id handelt, wäre der Punkt unsinnig.

und wenn ja: wie?

div:hover { /* Formate hier */ }

nein, das geht leider noch nicht, soll aber meines wissens bald von W3C in css 3 oder spätestens 4 gemacht werden.

geht mit ganz handelsüblichem CSS Level 2.

ich muss dir zustimmen, das wäre ein großartiges features, gerade für dhtml ohne js, aber es geht noch nicht, deswegen musst du die schulmethode, spricht onMouseOver/onMouseOut verwenden, kannst damit dann die <div>-class wechseln, was im endeffekt wie ein hover aussieht, aber halt nur mit js funktioniert

Wie gesagt, in modernen Browsern, die CSS 2 einigermaßen unterstützen (d.h. z.B. NICHT im Internet Explorer 6.0) geht das.

vielen dank  & grüße

Bitte,
Andreas

[herbalizer]

nein, das geht leider noch nicht, soll aber meines wissens bald von W3C in css 3 oder spätestens 4 gemacht werden.

Da muss ich dich berichtigen! Zu den in CSS1 http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes eingeführten Link-Pseudoklassen existieren seit CSS2 http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes die dynamischen Pseudoklassen welche NICHT an ein bestimmtes Element gebunden sind.

So funktioniert zB. folgendes einwandrfrei (zumindest in Konqueror3 und Mozilla1; IE weis ich nicht)

div {background: red;}
div:hover {background: green;}

Wichtig!!! Bei class oder id Selektoren UNBEDINGT ein Element angeben! #bla:hover oder .bla:hover funktionieren im Gegensatz zu div#bla:hover oder div.bla:hover nicht!!!

Gruß Herbalizer

[AndreasW]

Tach,

Da muss ich dich berichtigen! Zu den in CSS1 [link:

Ich Dich auch!

Wichtig!!! Bei class oder id Selektoren UNBEDINGT ein Element angeben! #bla:hover oder .bla:hover funktionieren im Gegensatz zu div#bla:hover oder div.bla:hover nicht!!!

Und zwar hier. Mozilla hat korrigiert.

.bla:hover und #bla:hover funktionieren einwandfrei. Zumindest in der 1.1alpha

Gruß Herbalizer

Andreas

[herbalizer]

Tach,

Und zwar hier. Mozilla hat korrigiert.

.bla:hover und #bla:hover funktionieren einwandfrei. Zumindest in der 1.1alpha

Naja im Mozilla 1.0 nich :(

herbalizer

[Kai Lahmann]

hi

Naja im Mozilla 1.0 nich :(

ich auch ein Problem... viele Webmeister wollten mal wieder das letzte Bit sparen und haben dann statt a:hover{} nur :hover{} geschrieben... Was da passiert, kann man sich denken, oder?

Grüße aus Bleckede

Kai

[AndreasW]

Tach

ich auch ein Problem... viele Webmeister wollten mal wieder das letzte Bit sparen und haben dann statt a:hover{} nur :hover{} geschrieben... Was da passiert, kann man sich denken, oder?

Tja, wer so blöd ist, sich nicht an die Vorgaben der Standards zu halten, nur weil der eine oder andere Browser noch nicht alles umsetzt, ist selber schuld...

Andreas

[Fabian Transchel]

nein, das geht leider noch nicht, soll aber meines wissens bald von W3C in css 3 oder spätestens 4 gemacht werden.

Da muss ich dich berichtigen! Zu den in CSS1 http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes eingeführten Link-Pseudoklassen existieren seit CSS2 http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes die dynamischen Pseudoklassen welche NICHT an ein bestimmtes Element gebunden sind.

So funktioniert zB. folgendes einwandrfrei (zumindest in Konqueror3 und Mozilla1; IE weis ich nicht)

div {background: red;}
div:hover {background: green;}

Wichtig!!! Bei class oder id Selektoren UNBEDINGT ein Element angeben! #bla:hover oder .bla:hover funktionieren im Gegensatz zu div#bla:hover oder div.bla:hover nicht!!!

ja ist gut, ich hab mich vertan, sorry kann mal vorkommen, ich mach sowas bis heute mit Mouse-Events, weil die :hovers einfach noch nicht überall funzen.
ausserdem muss man in diesem fall rücksicht auf den IE nehmen *g*

Gruß Herbalizer

Fabian

[Thomas Meinike]

Hallo,

ist es möglich, einen hover-effekt wie bei links auch für ganze div zu erzielen?

Ja, die Pseudoklasse :hover ist nicht nur fuer Links bestimmt. Unter Netscape 6.x/Mozilla klappt das auch mit DIVs:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 06/02</title>
<style type="text/css">
<!--
div.box
{
color: #FFF;
background-color: #F00;
border: 1px solid #FFC;
width: 150px;
height: 100px;
position: relative;
}

div.box:hover
{
color: #F00;
background-color: #FFF;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div class="box">Text</div>
</body>
</html>

Hier ist das mal mit INPUT-Feldern realisiert worden und alternativ dazu gibt es die JS-Loesung: http://www.styleassistant.de/tips/tip87.htm.

MfG, Thomas

[Kai Lahmann]

hi

Ja, die Pseudoklasse :hover ist nicht nur fuer Links bestimmt. Unter Netscape 6.x/Mozilla klappt das auch mit DIVs:

moment - das ist bei Mozilla für "normale" Elemente erst kurz vor der 1.0 reingekommen, insofern würde mich wundern, wenn das in Netscape 6 klappt.

Grüße aus Bleckede

Kai

[herbalizer]

hi

Ja, die Pseudoklasse :hover ist nicht nur fuer Links bestimmt. Unter Netscape 6.x/Mozilla klappt das auch mit DIVs:

moment - das ist bei Mozilla für "normale" Elemente erst kurz vor der 1.0 reingekommen, insofern würde mich wundern, wenn das in Netscape 6 klappt.

In netscape 6.1 funtkionukelts

Gruß Herbalizer