PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : rahmenfarbe bei mouseover ändern

Konne
2007-04-02, 22:07:54
folgendes, ich habe

<div id="test" class=test>blablabla</div>

und wenn der mauszeiger darüber geht, soll sich die rahmenfarbe ändern. ich bekomm es einfach nicht hin -.-
hab schon gegoogelt aber finde das nur mit backgroundcolor und grad die begriffe austauschen klappt nicht so wirklich...

hoffe es kann mir einer helfen :)
roadfragger
2007-04-02, 22:22:31
Meinst du sowas?

#test
{
border:3px grey;
}

#test:hover
{
border:3px yellow;
}

Edit: Sehe grade, dass das allerdings scheinbar nur beim Mozilla funzt. Alternativ wäre es natürlich mit Javascript möglich...
Konne
2007-04-03, 12:05:38
sowas habe ich auch gefunden und wie schon bemerkt, läuft das zB im IE nicht -.-

und passenden javascript habe ich noch nicht gefunden *grml* (kann doch nicht soo schwer sein ^^)
Sephiroth
2007-04-03, 15:31:47
sowas habe ich auch gefunden und wie schon bemerkt, läuft das zB im IE nicht -.-

und passenden javascript habe ich noch nicht gefunden *grml* (kann doch nicht soo schwer sein ^^)
JavaScript -> http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout

<div id="test" class="test" onmouseover="this.style.borderColor='#272545';" onmouseout="this.style.borderColor='#489464';">blablabla</div>

btw, hat das einen Grund das du class="test" und noch id="test" verwendest?
dav133
2007-04-03, 15:50:49
Jetzt wurdes zwar schon beantwortet, ich posten meinen Kram aber trotzdem mal.


Als Link:



<html>
<head>


<style type="text/css">
#rahmen
{
border:3px solid green;
}

#rahmen:hover
{
border:3px solid red;
}
</style>
</head>

<body>

<a id="rahmen" href="#">asd</a>

</body>
</html>




Als (umständliches) Javscript:


<html>
<head>


<style type="text/css">
#rahmen
{
border:3px solid green;
}

</style>


<script type="text/javascript">
function rein()
{
//--> Rahmen rot
//FF
if (document.layers || document.getElementById)
{
if (document.getElementById("rahmen")) document.getElementById("rahmen").setAttribute("style", "border: 3px solid red;");
}

//IE
if (document.all)
{
if (document.getElementById("rahmen")) document.getElementById("rahmen").style.cssText = "border: 3px solid red;";
}
}

function raus()
{
//--> Rahmen wieder grün
//FF
if (document.layers || document.getElementById)
{
if (document.getElementById("rahmen")) document.getElementById("rahmen").setAttribute("style", "border: 3px solid green;");
}

//IE
if (document.all)
{
if (document.getElementById("rahmen")) document.getElementById("rahmen").style.cssText = "border: 3px solid green;";
}
}
</script>

</head>

<body>

<div id="rahmen" onmouseover="rein();" onmouseout="raus();">asd</a>

</body>
</html>
Sephiroth
2007-04-03, 20:07:04
Mit verlaub aber dein JS-Code ist reichlich aufgeblasen (doppelt und dreifach gemoppelt). ;p
DanMan
2007-04-04, 00:02:22
Mit verlaub aber dein JS-Code ist reichlich aufgeblasen (doppelt und dreifach gemoppelt). ;p
Und wie gehts besser? (ich kann kein JS).

Dass es im IE6 mit bloßem CSS nicht funktioniert liegt übrigens daran, dass er :hover nur für Anker unterstützt.
dav133
2007-04-04, 01:34:41
Und wie gehts besser? (ich kann kein JS).<div id="test" class="test" onmouseover="this.style.borderColor='#272545';" onmouseout="this.style.borderColor='#489464';">blablabla</div>

Mein "aufgeblasener" Code kommt eigentlich auch in anderen Teilbereichen zum Einsatz, bei nem simplen Mouseover gehts freilich einfacher ;).

lg
Sephiroth
2007-04-04, 01:51:21
1.) beim IE würde der Code zweimal ausgeführt

2.) bei "if (document.getElementById("rahmen"))" verwirfst du im prinzip das objekt, um es dann gleich wieder erneut zu holen? speicher es doch bitte in einer variable. oder noch besser: verwende einen parameter und ruf rein(this) auf, wenn es eh für dieses objekt gilt.

3.) document.getElementById und setAttribute funktioniert auch für den IE, womit eine extra-wurst beim JS-Code gar nicht nötig wäre (edit: na gut, letzteres wohl ausgenommen beim style)

4.) es ist unklug den style komplett zu überschreiben, wenn man nur wenig ändern will

5.) document.layers gibt es bei Firefox/Mozilla/Opera nicht, sondern nur bei Netscape 4

Dass es im IE6 mit bloßem CSS nicht funktioniert liegt übrigens daran, dass er :hover nur für Anker unterstützt.
ich weiß :smile: und leider auch beim IE7
dav133
2007-04-04, 14:06:48
1.) beim IE würde der Code zweimal ausgeführt
nein. Die eine Routine ist für den IE, die andere für den FF (wie auch kommentiert) ;).


2.) bei "if (document.getElementById("rahmen"))" verwirfst du im prinzip das objekt, um es dann gleich wieder erneut zu holen? speicher es doch bitte in einer variable. oder noch besser: verwende einen parameter und ruf rein(this) auf, wenn es eh für dieses objekt gilt.
Das ist der Versuch eines unerfahrenen Javascript-Programmierers, Javascriptfehler zu vermeiden, indem ich erstmal checke, ob das Objekt überhaupt existiert ;).


3.) document.getElementById und setAttribute funktioniert auch für den IE, womit eine extra-wurst beim JS-Code gar nicht nötig wäre (edit: na gut, letzteres wohl ausgenommen beim style)
eben... Siehe 1).


4.) es ist unklug den style komplett zu überschreiben, wenn man nur wenig ändern will
Es wird doch nur das entsprechende Attribut überschrieben, in diesem Falle border.


5.) document.layers gibt es bei Firefox/Mozilla/Opera nicht, sondern nur bei Netscape 4
Hmm, keine Ahnung, auf jedenfall klappts irgendwie... Werd mir das nochma ansehn.
Sephiroth
2007-04-04, 15:06:43
nein. Die eine Routine ist für den IE, die andere für den FF (wie auch kommentiert) ;).
nö, schau dir die if-bedingung nochmal an. auch wenn der code keine wirkung in dem speziellen fall zeigt (wegen einer weiteren eigenheit des IE), wird er dennoch ausgeführt!
wenn man schon unterscheiden muß/möchte, dann sollte wirklich etwas eindeutiges benutzt werden.
if (document.all)
{
// IE stuff
}
else
{
// normal browsers stuff
}
oder
<!--[if IE]>
<script type="text/javascript">var IS_IE = true;</script>
<![endif]-->
<script type="text/javascript">
if (IS_IE)
{
// IE stuff
}
else
{
// normal browsers stuff
}
</script>


Es wird doch nur das entsprechende Attribut überschrieben, in diesem Falle border.
tja und was wenn noch mehr im style attribut definiert ist? dann überschreibst du es. wenn du wirklich nur die farbe des rahmens ändern willst, dann ändere auch nur diese mit und zwar borderColor.
dav133
2007-04-04, 19:42:26
tja und was wenn noch mehr im style attribut definiert ist? dann überschreibst du es. wenn du wirklich nur die farbe des rahmens ändern willst, dann ändere auch nur diese mit und zwar borderColor.

Bleibt mir jetzt nur noch die Ausrede, dass bordercolor glaub ich deprecated is.
Sephiroth
2007-04-04, 20:49:34
Bleibt mir jetzt nur noch die Ausrede, dass bordercolor glaub ich deprecated is.
Aber eine ganz schwache, da das nicht der Fall ist. ;)

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties-borderColor
http://developer.mozilla.org/en/docs/CSS:border-color