Frage zu CSS Hover Effekt

[Kai_Mops]

Hallo liebe Community,

also entweder habe ich gerade ein Blackout oder ich weiß echt nicht wie es geht

Ich habe ein Bild und möchte es als Link verwenden.. Die Frage ist jetzt: Wenn ich im normalen Zustand einen schwarzen Rahmen habe und jetzt im "Hover" Zustand einen orangenen Rahmen haben will.. kann ich da jetzt nur mit nem zweiten Bild und dem orangenen Rahmen einbauen? Oder gibt es da nen CSS Code wo man den Rahmen eines solchen Bilder per Hover ändern kann?

MfG

Kai

 

[MissSpy]

AW: Frage zu CSS Hover Effekt

hey.

du schreibst einfach a:hover {& dann einfach bestimmen wie der Rahmen aussehen soll;}

hier ist eine super seite wo du nachschauen kannst.

CSS 4 You - The Finest in Stylesheets

sollte bei jedem Element funktionieren - steht aber auch in dieser Seite.

 

[sloshed]

AW: Frage zu CSS Hover Effekt

Hallo,

du kannst deinem <a>-Tag mit css einen Rahmen geben und mit a:hover ihm eine andere Rahmenfarbe geben.

Beispiel:

a {
border: 1px solid #fff
}

a:hover {
border: 1px solid #000
}

 

[Kai_Mops]

AW: Frage zu CSS Hover Effekt

Das Problem ist, ich will nur einen Rahmen um Bilder haben und nicht um andere Links...

gibt es einen speziellen Befehl für die Rahmen von Bildern?

 

[sokie]

AW: Frage zu CSS Hover Effekt

dann kannst du dem a element eine klasse geben zB

<a class="bildlink" href="linkadresse"><img src="bildadresse"></a>

und das css für alle 'bildlink"

a.bildlink{
  border: /* hier die formatierungen */;
}
a.bildlink:hover{

}

 

[Kai_Mops]

AW: Frage zu CSS Hover Effekt

Irgendwas will da einfach nich funktionieren.. ich verstehe das nicht :-( verdammt

naja vielleicht komme ich da irgendwie noch hinter...

vielleicht seht ihr ja schon auf Anhieb nen Fehler..



Das ist die Seite..

Meine Seite gestalte ich mit TypoLight..

MfG

Kai

 

[sloshed]

AW: Frage zu CSS Hover Effekt

Du kannst doch auch nur dem Div "Navigation" die Werte für das <a> Tag zuweisen.

#navigation a {
border: 1px solid #fff
}

#navigation a:hover {
border: 1px solid #000
}

In der .css ist sicherlich auch die <ul> der Navigation drinne.
Weise einfach ihr einen zusätzlichen Rahmen hinzu.

 

[agielen]

AW: Frage zu CSS Hover Effekt

wenn das Dein Bild ist:
<img id="Bild" src="img/....gif" />

dann kannst Du doch in der css-Datei die Werte eintragen:

#Bild {
border: 2px solid #ffffff
}

und für den hover-effect -->

#Bild a:hover {
border: 2px solid #dcdcdc
}

Versuch das mal...

 

[zmart]

AW: Frage zu CSS Hover Effekt

gehts nicht einfacher mit
a img { border: 2px solid #fff; }
a:hover img { border: 2px solid orange; }

somit hättest du eben um jedes bild (welches bestandteil eines links ist) den gewünschten effekt (wenn ich jetzt nicht komplett auf der leitung stehe )

 

[dove]

AW: Frage zu CSS Hover Effekt

wenn das Dein Bild ist:
<img id="Bild" src="img/....gif" />

dann kannst Du doch in der css-Datei die Werte eintragen:

#Bild {
border: 2px solid #ffffff
}

und für den hover-effect -->

#Bild a:hover {
border: 2px solid #dcdcdc
}

Versuch das mal...

Das würde bedeuten, dass es einen Link IM Bild gibt. Aber im Endeffekt ist ja der Link um das Bild herum.

Also so wie zmart sagte:

a img { border: 2px solid #fff; }
a:hover img { border: 2px solid orange; }

 

[quasibodo]

AW: Frage zu CSS Hover Effekt

Du bindest doch in html einen link ein, und zusätzlich enthält der link ein Bild, so daß sich das Bild als der Link darstellt. Wenn Du dem Bild eine eigene Eigenschaft zuordnen willst, dann versuche es doch mal im img-tag, etwa so:

<img class="soundso" src="img/....jpg />

Die Sache mit <img id="soundso"...>, wie es beschreibt, hat einen Haken, da jede id nur einmal vergeben werden kann. Möchtest Du also den gleichen Effekt noch an anderer Stelle haben, muß eine neue id her.

Und in der css schreibst Du dann, wie ober auch schon erwähnt:

.soundso { border und die Eigenschaften }
.soundso:hover { border und die Eigenschaften }

 

[infernalshade]

AW: Frage zu CSS Hover Effekt

Aber bei Bildern extra ne neue Klasse vergeben wenns mit der Möglichkeit von zmart auch geht?! (so hätte ichs auch gelöst)
Das bläht doch das HTML und CSS nur unnötig auf..

 

[Groozzz]

AW: Frage zu CSS Hover Effekt

ich würde auch keine neue Klasse vergeben....macht keinen Sinn, es ei denn nicht alle img in alle a sollen so behandelt werden.....

 

[Kai_Mops]

AW: Frage zu CSS Hover Effekt

Ich habe es jetzt einfach mit ner neuen Klasse gemacht.. war mir jetzt egal, ob ich da jetzt noch 4 Zeilen mehr habe oder in China fällt nen Sack Reis um..

Immerhin habe ich jetzt nach einigem Hin und Her das Ergebnis welches ich auch haben wollte danke schön an alle Poster..

 

[quasibodo]

AW: Frage zu CSS Hover Effekt

von wegen aufgeblähter code...

WENN es nur EINE einzelne Situation ist, in der dieses Problem gelöst werden soll, dann ist es meiner Ansicht nach die eindeutigste und auch beste Lösung.

Wenn es jedoch VIELE gleichartige Links gibt, bei der jeder Link ein eigenes Paar von Hintergrundbildern hat, dann sollte man in html schreiben:

<img class="soundso" id="anderswie1" src="img/....jpg />

und beim nächsten Link

<img class="soundso" id="anderswie2" src="img/....jpg />

Diese Art von Definition wird dann oft genommen, wenn der html-code automatisiert erstellt wird. Wenn ich also ein cms oder einen shop nehme, wo ich einstellen kann, welche Box oder welche Angaben wo auf der Seite gemacht werden, dann ist das der optimale Weg. So gibt es "class" als übergeordnete Eigenschaft und "id" als eindeutige Beschreibung der Verwendung des konkreten Objektes.

Aber wie gesagt, ein einziger Link, da spielt es keine so große Rolle.

 

[LongDonGold]

AW: Frage zu CSS Hover Effekt

Ich glaube das ist für dich das einfachste

Css Angaben

[COLOR=#000000]#navbuttons a{

    display:block;

    background-image:url(deinbild.jpg);

    width:selbst angeben;

    height:selbst angeben;

    text-align:center;

    font-size:12px;

    color:#eafeb0;

    text-decoration:none;

    }

#navbuttons a:hover{

    background-image:url(deinbild_over.jpg);

    color:#38421b;

    }[/COLOR]

Body Bereich

<div id="navbuttons">

    <b>Navigation</b>

    <a href="#">Testlink</a>

    <a href="#">Testlink2</a>

    <a href="#">Testlink3</a>

    <a href="#">Testlink4</a>

</div>