Rollover TEXT mit CSS (?!)

Libby · 29.06.2003, 22:25

Kuckuck...!

...und ich bin schon wieder hier weil ich etwas nicht verstehe. Ich weiss es hat eine Menge Beiträge die sich um genau das Selbe Thema drehen aber alle die dort etwas schreiben, verstehen schon was von CSS.

Ich hab zwar die 3 Teile des Workshops durchgemacht aber wirklich schlau bin ich nicht draus geworden

(Will damit aber NICHT sagen der Workshop sei nicht gut...)

Ich möchte ganz einfach einen Text der zuerst (z.B.) rot ist mit Grösse 10 und wenn man drüber fährt dann gelb wird mit Grösse 16. Habe das mit onmouseover versucht aber das geht ja nicht weil der 1. Text keinen Hyperlink ist. Dann habe ich diesen Code gefunden:

style="text-decoration:none; color:black"="javascript:;

aber irgendwie klappt auch das nicht. Ich weiss ehrlich nicht wie das funktioniert.

Wäre lieb jemand könnte mir helfen...

Grüsschen Libby

Ps. Kennt jemand noch mehr Workshops wie die zu CSS??

Daniel N. · 29.06.2003, 22:35

du machst das folgendermassen:

p.normal {
text-decoration: none;
}

p.hover {

text-decoration: underline:;
}

kein plan obs funzt, ich hab das noch nie gemacht ausser bei hyperlinks und dort macht mans ja auch so! musst natürlich noch andere attribute wie textgrösse und farbe hinzufügen und natürlich noch doie <style> tags usw...

prefix · 29.06.2003, 22:39

hier ein kleines beispiel aus der praxis - code:

Code:

.blogheader{
	width: auto;
	text-align: right;
	font-weight: bold;
	color: Black;
	padding-bottom: 5px;
	border-bottom: 1px solid black;
}
.blogheader a:link {
	color: #AE5700;
	text-decoration: none;
	border-bottom: 1px dashed #AE5700;
	font-weight: bold;
}

.blogheader a:visited {
	color: #AE5700;
	text-decoration: none;
	border-bottom: 1px dashed #AE5700;
	font-weight: bold;
}

.blogheader a:hover {
	color: #AE5700;
	text-decoration: none;
	border-bottom: 1px dashed #AE5700;
	background-color: #D6EB34;
	font-weight: bold;
}

.blogheader a:active {
	color: #AE5700;
	text-decoration: none;
	border-bottom: 1px dashed #AE5700;
	background-color: #D6EB34;
	font-weight: bold;
}

sollte nach kurzem studium soweit klar sein :-)

Daniel N. · 29.06.2003, 22:41

funzt ned so wie ichs erklärt habe....logisch eigentlich!

Libby · 29.06.2003, 22:54

Sorry aber ich versteh echt nur Bahnhof. Was muss ich wo mit p (P?) oder mit blogheader (???) ?! *HILFE*

(Bitte die Anleitung für DUMMIES

)

Libby

CaPTaInCHaoS · 30.06.2003, 00:54

Moin,
füge das mal in deinen Head ein

<head>
<STYLE TYPE='text/css'>

a:link { color:#000000; text-decoration:none}
a:visited { color:#999999; text-decoration:underline}
a:hover { color:#000000; text decoration:underline;cursor:hand}
a:active { color:#000000; text-decoration:none}
</STYLE>
</head>

Erklärt sich von selbst

Einfach so einfügen und testen.

EDIT

hoppla, doch schon spät, das mit der Textgröße hab ich doch glatt übersehen

prefix · 30.06.2003, 08:22

.blogheader ist einfach eine klasse, die eben "blogheader" heißt - du kannst sie auch anders nennen.

klassen ermöglichen es, verschiedene linkformatierungen vorzunehmen! d.h. du kannst verschiedene hyperlinks auf ein und derselben seite different definieren...

webmichl · 30.06.2003, 09:17

Es sollen aber keine Links, sondern normaler Text gehovert werden! Und das geht nun mal nicht mit ner einfachen CSS-Definition.

Eine Eigenart einiger Threads mit dieser Fragestellung ( Text hovern ): spätestens bei der 3. Antwort ist man bei den Links angekommen...

@Libby: Wenn Du wirklich diese Hovereffekte haben willst, müsstest Du Dich in's Dynamische HTML einarbeiten - ob's das wert ist...

prefix · 30.06.2003, 09:20

oder eben einen blinden link (# oder javascript:

draufsetzen - sonst ist das nicht per css machbar (wie webmichl ja auch sagt).

webmichl · 30.06.2003, 10:29

Zitat:

Original geschrieben von prefix
oder eben einen blinden link

OK - akzeptiert. Wenn man noch den Underline wegnimmt ( text-decoration: none; ) und den Cursor unverändert lässt ( cursor: standard; ), sollte dem "getricksten" Text-Hover nix im Wege stehen...

Aaalso, das Beispiel unseres Captains, etwas erweitert:

<head>
<STYLE TYPE='text/css'>

a.textrollover:link { color:#000000; text-decoration:none; cursor: standard; font-size: 12px; }
a.textrollover:visited { color:#999999; text-decoration:none; cursor: standard;font-size: 12px;}
a.textrollover:hover { color:#000000; text decoration:none; cursor: standard;font-size: 18px;}
a.textrollover:active { color:#000000; text-decoration:none; cursor: standard;font-size: 12px;}
</STYLE>
</head>

Und der zu hovernde Text:

<p>bla bla <a href="#" class="textrollover">ich werde gehovert</a> bla bla</p>

Du solltest aber bedenken, daß der Text hinter dem Hover-Teil sich bei der Schriftvergrösserung verschieben wird - das kann zu unschönen Effekten führen...

prefix · 30.06.2003, 10:37

ich würd da noch eine kleine änderung vornehmen, damit das ganze "sicherer" wird:

Code:

<p>bla bla <span class="textrollover"><a href="javascript:;">ich werde gehovert</a></span> bla bla</p>

begründung:

- "span" wird von allen browsern sicherer interpretiert - eine klasse direkt für einen anchor ist nicht ideal
- "javascript:;" hat gegenüber "#" den vorteil, dass man keinen internen anchor anspringt (also z.b. #top) oder so :-) (wirkt sich nur beim klick aus)

p.s.: "javascript" wurde zerrissen - gehört zusammengeschrieben

p.p.s.: ev. kann es noch nötig werden, dass man den cursor als arrow definiert - kommt auf die browser drauf an (inwieweit diese "standard" interpretieren) --> gehört getestet :-)

webmichl · 30.06.2003, 10:41

Hast's mal ausprobiert?

Die Linkformatierungen sind so nämlich wieder weg - sprich, du hast wieder nen normalen Link...

prefix · 30.06.2003, 10:42

aha, na ich schau mir das mal an!

prefix · 30.06.2003, 10:49

so, folgendes funktioniert auf ie6, op7, nn7, moz/firebird 0.6 - hier das live-beispiel!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
}

.rollover {
	color: black;
}

.rollover a:link {
	text-decoration: none;
	cursor: default;
	color: black;
}

.rollover a:visited {
	text-decoration: none;
	cursor: default;
	color: black;
}

.rollover a:hover {
	text-decoration: none;
	cursor: default;
	color: black;
	background: Yellow;
}

.rollover a:active {
	text-decoration: none;
	cursor: default;
	color: black;
}
</style>
</head>

<body>
ich bin normaler text und <span class="rollover"><a href="javascript:;">ich werde gehovert</a></span> 
- ich bin wieder normal
</body>
</html>

prefix · 30.06.2003, 10:54

so, und hier findest genau das von dir gewünschte beispiel!!! der effekt ist aber alles andere als schön :-(

btw: topic kommt ins puristen-board, da diese lösungen an sich nichts mehr mit dw zu tun haben :-)

Rollover TEXT mit CSS (?!)

Versteh nur BAHNHOF

Sicher?