Bei Mouseover Textfarbe verändern, aber kein Link !

[Bob]

Hallo !:mrgreen:
Ich bin totaler Beginner.
In meiner Seite soll, wenn ich mit der Maus über eine div fahre, in der Text steht, sich dieser Text in der Farbe ändern. Ich möchte aber keine Link Variante.
Falls Antwort, bitte Anfängergerecht!:shock:

Dank im Voraus.;heart

 

[andynail]

Hallo Bob

ich hab das gerade so mit der Zeile

<div onmouseover="this.style.color='#0af0e0'" onmouseout="this.style.color='#000'">das ist der Text und das <a href="www.google.de">der Link</a></div>

gemacht. Hier bildet this das Objekt, in deinem Fall das div und wird mit style formatiert.

Gruß Andreas

 

[Bob]

Danke für die schnelle Reaktion.
Nun gehe ich neuen Mutes, morgen an das ausprobieren.
Gruß Bob !

 

[Efchen]

Warum postest Du Deine Frage ins CSS-Forum, wenn Du dann eine JavaScript-Variante angeboten bekommst?
Schlechte Idee, andynail, bitte auch aufs Forum schauen und außerdem sich bewusst sein, dass die Lösung bei abgeschaltetem JavaScript nicht funktioniert.

Mit der CSS-Pseudoklasse ":hover" funktionierts aber immer. Bob, mach es mit CSS!

Übrigens steht Text gemäß HTML niemals in einem <div>. Ein Textabsatz wird mit <p> ausgezeichnet, eine Adresse mit <address>, eine Überschrift mit <h1> bis <h6> usw...

 

[prm]

Warum postest Du Deine Frage ins CSS-Forum, wenn Du dann eine JavaScript-Variante angeboten bekommst?

Was als Antwort angeboten wird, kann der Fragesteller ja nicht wissen :?

Versuch's also mal vom Grundsatz her so:

HTML:

<a href="#">Textfarbe ändert sich beim Hovern</a>

CSS:

a:link, a:visited {color: #000; text-decoration: none;}
a:hover {color: #f00;}

Vielleicht solltest du für diesen Fall jedoch die Formatierung durch eine spezielle CSS-Klasse vornehmen, damit sich diese Art von Hover-Effekt von den tatsächlichen Links unterscheidet.
Besser also:

<a href="#" class="hovertext">Textfarbe ändert sich beim Hovern</a>

a.hovertext:link, a.hovertext:visited {color: #000; text-decoration: none;}
a.hovertext:hover {color: #f00;}

 

[Efchen]

Was als Antwort angeboten wird, kann der Fragesteller ja nicht wissen :?

War eine unglückliche Formulierung :-)

War auch eher an andynail gedacht, der im CSS-Forum JavaScript-Antworten postet.

 

[Bob]

Hallo !
Dank an euch Alle.
Der zweite Vorschlag von prm,;;<a

<a >
a.hovertext:link, a.hovertext:visited {color: #Hovernext-decohovertextolink
a.hhovertexthvisitedolcolor#f00;}
textfdecorationasnone suchhovertextVhoverercolorrer Farbe des Textes ohne zum Schluss an einem Link hängen zu bleiben.
Frage komplett beantwortet !

 

[Bob]

Kauderwelschversehen.
Natürlich !
<a href="#" class="hovertext">Textfarbe ändert sich beim Hovern</a>

a.hovertext:link, a.hovertext:visited {color: #000; text-decoration: none;}
a.hovertext:hover {color: #f00;}

 

[Bob]

Hallo !
Doch noch eine Frage.
a.hovertext:link, a.hovertext:visited {color: #000; text-decoration: none;}
a.hovertext:hover {color: #f00;}
geht sehr gut in der html Seite.
Nun habe ich eine externe css, mit noch a:link und a:hover, mit anderer Farbe, welche, wenn alle ( a. ) in der css Datei sind, durch einander kommen.
Wie kann ich die a`'s hierarchisch strukturieren?
Dank und Gruß Bob

 

[PeterUstinox]

Du begibst dich in das gefährliche Welt der Kaskadierung (das "C" von "CSS) von CSS, die angeblich 99% der Webdesigner nicht kennen.
Bei der Kaskadierung geht es um Spezifität.
Je spezifischer der CSS-Selektor, desto eher wird das darin enthaltene Property angewandt.

Grob:
Klassen-Selektoren sind spezifischer als normale Element-Selektoren.
Id-Selektoren sind immer am spezifischsten.

Dazu würden dann noch die Nachfahren-Selektoren kommen.

Bei gleicher Spezifität wird jedoch die CSS-Regel verwendet, die weiter unten in deiner CSS-Datei steht.

 

[prm]

Ich kann da keine Probleme erkennen.
Die Klasse soll ja gerade dazu dienen, dass eine unterschiedliche Darstellung erfolgt.
Poste mal bitte einen Link zu deiner Problemseite bzw. den maßgeblichen HTML/CSS-Code.

 

[stevezi]

die frage war doch ohne link!

ich löse das so:

<div class="bp">
Hier ist dein Text
</div>

im CSS:

.bp {
background: gray;
color: red;
}
.bp:hover {
color: black;
}

gruss steve

 

[Efchen]

Einen Textabsatz zeichnet man mit <p> aus, nicht mit <div>...

 

[stevezi]

Hallo !:mrgreen:
Ich bin totaler Beginner.
In meiner Seite soll, wenn ich mit der Maus über eine div fahre, in der Text steht, sich dieser Text in der Farbe ändern. Ich möchte aber keine Link Variante.
Falls Antwort, bitte Anfängergerecht!:shock:

Dank im Voraus.;heart

zum thema <p>vs<div>
erst lesen, dann schreiben!
is ja auch egal, es geht mit beiden varianten!

 

[Efchen]

zum thema <p>vs<div>
erst lesen, dann schreiben!

Ja, Du steckst in Deinem Beispiel Text in ein <div>. das ist semantisch falsch.

is ja auch egal, es geht mit beiden varianten!

Syntaktisch okay, aber semantischer Unfug. Text packt man in einen Textabsatz, niemals in ein <div>.