Link per Javascript als hover makieren?
lima-city → Forum → Programmiersprachen → Sonstige Programmiersprachen
attribut
bestimmte farbe
blocken
code
display
dom
eigenschaft
element
farbe
folgendes problem
funktion
herstellen
http
image
kompliziert url
machen
manipulation
position
text
url
-
Hallo liebe Community,
ich habe folgendes Problem... ich will von einem Link eine Div ebene öffnen... dabei soll bei meinem mouseover über den einen textlink der linkhintergrund eine bestimmte farbe halten. wie realisiere ich das mit javascript? die divebenen habe ich schon komplett gebastelt ich brauche nur noch die funktion mit dem link hover... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo "vonschuelernfuerschueler";
Soweit ich weiß kann Javascript so eine Manipulation nicht durchführen. Aber ich kann mich auch täuschen! Ich selber würde dieses Problem wie folgt angehen: Setze einfach eine Ebene (<div>) über diesen Link in der selben Größe und bearbeite die Div per CSS entsprechend!
Hoffentlich konnte ich dir weiterhelfen! -
Hey,
das geht recht einfach über das style-Attribut von Dom-Elementen. Einfach dem Link eine ID geben für den schnellen Zugriff und dann über document.getElementById(<id>).style.backgroundColor = <farbe>; die gewünschte Farbe zuweisen.
Das packst du am besten in eine Funktion, dann ist das softwaretechnisch gut gekapselt ;)
Bei <farbe> kannst du den RGB Code angeben über #xxyyzz oder ein vordefinierte Farbe wie "yellow", "green", "black".
Grüße
Schädel
Beitrag zuletzt geändert: 12.9.2010 10:55:13 von schaedlich -
Ich nutze für solche Dinge vorwiegend jQuery. Dort kannst du beispielsweise folgenden Code verwenden:
Das ganze in eine Funktion, wie es auch schaedlich empfohlen hat, gepackt, kannst du mit dem Attribut "onmouseover" die Funktion aufrufen. Mit dem Attribut "onmouseout" kannst du dann die ursprüngliche Form wieder herstellen.//[selector] = Auswahlkritierum wie bei CSS, zB '#id' für ein Element mit dem Attribut 'id', //oder '.classname' für ein/mehrere Element/e mit der entsprechenden Klasse 'classname' //[farbe] = CSS-Farbdefinition $("[selector]").css("color", "[farbe]");
Beitrag zuletzt geändert: 13.9.2010 10:48:32 von wagnerm -
Leute, macht ihr das kompliziert...
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
einfach den a:focus { font-weight:bold; color:red; text-decoration:underline; }
in einen Style-bereich reinhämmern, dann passt das... das ist einfaches CSS
und man könnte so eine manipulation über JS durchführen über die Eventhandler... ist aber nciht notwendig...
Beitrag zuletzt geändert: 13.9.2010 10:59:12 von sebulon -
@sebolun
Jo so sollte das auch gehen, sofern die div box innerhalb des a-Tags liegt.
Dann einfach per
/* sichtbar */
a.<id>:hover div { display: block; }
/* unsichtbar */
a.<id> div { display: none; }
sichtbar / unsichtbar machen die div.
Das klappt sogar beim IE6 und das ohne Javascript.
Beitrag zuletzt geändert: 13.9.2010 12:22:39 von schaedlich -
Oder nen Style-Sheet einbinden mit dem Inhalt:
a:link, a:visited { text-decoration: none; color: #ffffff; /*Damit kannst du die Rahmenfarbe um den Link beeinflussen, der erscheint wenn du auf dem Link klickst*/ } a:hover, a:active { text-decoration: none; color: #ffffff; }
Und dann bildest dir einfach weitere Klassen:
z.B.:
a.button00 { display: block; text-decoration: none; position: relative; top: 5px; width: 62px; height: 64px; float: left; margin: 0px; padding: 0px; } a.button00:link, a.button00:visited { background-image: url("../gfx/main.jpg"); } a.button00:hover, a.button00:active { background-image: url("../gfx/main_active.jpg"); }
Hier habe ich Bilder mit nem hover Effekt.
der Link Code wäre dann:
<a class="button00" href="Da wo du mich hinhaben möchtest"></a>
Das ganze geht natürlich auch nur mit Text... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
