css für mouseover

otis

otis

Aktives Mitglied
Thread Starter
Dabei seit
08.09.2002
Beiträge
616
Reaktionspunkte
1
hallo,

kennt von euch jemand das css für einen mouseover wo der link:

_ home

in

+ home

wechselt wenn man darüber fährt?

danke und viele grüße
otis
 
Dürfte nicht so einfach sein, schliesslich kann man unter normalen Umständen nicht zwei Zeichen auf ein und die selbe Stelle setzen, es sei denn Du packst sie in einen entsprechenden Container (div) der entsprechend positioniert (abolute, leider) ist.
Beispiel dass dieser Technik entspricht hier:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
Da steht dann auch genau wie es geht. Evtl. musst Du halt für Deine Zwecke Parameter verändern (Position, z-index, usw...) aber grundsätzlich sollte das Deine Fragen beantworten.

Grüße,
Flo
 
Schau auch mal hier rein, ist recht hilfreich.

Menü mit CSS

noch mehr Menüs mit CSS und weitere Tipps .

mfg
Mauki
 
*danke*

danke euch allen,

ich werde das jetzt mal auf verschiedene arten probieren... ihr habt mir ja jede menge links gemailt!

schade, dass der wechsel mit mouseover bei:

_ link | + link

so schwer zu handeln ist!

viele grüße
otis
 
Re: *danke*

Original geschrieben von otis
_ link | + link
Zum Vergrößern anklicken....

Wie wäre es das Plus und den Unterstrich als Grafik einzubinden, a la:

a:link {background: url(unterstrich.gif) left, no-repeat...}
a:hover {background: url(plus.gif) left, no-repeat...}

Weitere Parameter nach persönlichem Gusto...

Grüße,
Flo
 
span tag

danke für eure antworten!

also das mit dem gif einbinden ist nicht so meine sache!

ich habe jetzt eine elegante lösung, die mit jedem browser funktioniert ausser dem explorer!

weiß jemand, ob der explorer das span tag im css nicht unterstützt?
 
hi,

wenn du das problem am span-tag festmachen kannst, dann ersetze
es mal durch das div-tag.

grüsse vom raynor
 
weiß nicht so recht...

schreibe hier mal das css script rein:

das im head:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
a {color:#FF9900; text-decoration:none;}
a:hover {color:red;}
.what {color:black;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #0066FF;
text-align: left;
text-indent: 30pt;
margin-top: 25px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
.who {color:#0066FF;}
</style>

td colspan="2" valign="top" bgcolor="#FF9900"
<p class="what"><a href="index.php">[ <span class="who">_ home</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ kompanie</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ service</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ kontakt</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ links</span> ]</a></p>
</td

meinst du hier ansatt span, div?

habe mal die klammern in der tabelle weggemacht damit er das auch nimmt
 
ach mist, der nimmt das table tag nicht!!

td colspan="2" valign="top" bgcolor="#FF9900">
<p class="what"><a href="index.php">[ <span class="who">_ home</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ kompanie</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ service</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ kontakt</span> ]</a></p>
<p class="what"><a href="index.php">[ <span class="who">_ links</span> ]</a></p>
</td
 
hi,

nein - sorry, aber in diesem fall würde das nichts nützen.
du erzeugst einen mortz konflikt, indem du "a", "a:hover",
".who" und ."what" allesamt auf den text (link) anwendest.
denk mal nach, du bestimmst, dass alle links die farbe x
haben sollen und nicht unterstrichen, dann bestimmst du,
dass beim überfahren mit der maus, die farbe wechseln soll.
soweit ok, bis auf den code - nummer sicher wäre:

a:link { color:#farbwert; u.s.w.; }
a:visited { color:#farbwert; u.s.w.; }
a:hover { color:#farbwert; u.s.w.; }
a:active { color:#farbwert; u.s.w.; }

als nächstes bildest du zwei klassen (.what, .who), die du
ebenfalls dem link-text zuweist. was denn nun? "a", ".what"
oder ".who"? die browser entscheiden hier nach priorität.

zum css: du kannst alle anweisungen, die den wert "auto"
oder "normal" enthalten komplett löschen, weil "default".

zum html: inline-element in inline-element ist zwar möglich,
"span" in "a" ist aber nicht so glücklich, zumal du es ohnehin
nur einsetzt, um eine zweite klasse zu zuweissen, wodurch es
quasi überflüssig wird.
hier käme dann "div" in's spiel, womit du eine klasse übergeben
kannst (und anderes), indem du deine ganzen absätze (auch keine
sehr schöne lösung) in einen "div-container" packst.
so viel zum gröbsten.

am besten, du überdenkst die sache in aller ruhe.

grüsse vom raynor
 
hi raynor,

grübel, grübel, grübel

ok, ich habe mir überlegt, dass ich weiter mache.

natürlich habe ich den code, der zuviel war entfernt. weil klaro, auto und so hat keinen sinn.

jetzt zu dem tag:

sorry leute ich gebe es auf, der macht mir nie den ganzen beitrag :(

p class="what"><a href="index.php">[ <span class="who">_ home</span> ]</a>

die class="what" richtet den link nach den anweisung von .what ein. die class="who" gibt die farbe des links an, also 0066FF
 
hi,

du machst es dir unnötig schwer.
mal davon abgesehen, dass "what" zwei farbangaben enthält
(für eine solltest du dich entscheiden), ist es möglich,
ausrichtung und farbangaben in einer(!) klasse zusammenzufassen
(wie gesagt, deine variante "beisst sich").
gehe doch mal schritt für schritt vor - zum beispiel:
erstmal nur die links beackern. wenn du zufrieden bist, dann gehe
an die ausrichtung, dann der kleinkram.
auf die schnelle eine (nicht perfekte) anregung:

<!--
<html>
<head>
<title>titel</title>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size:14px; background-color:#ffffff;}
#tab {margin-top: 25px; margin-left: 25px; background-color:#666666;}
#link_normal {color:#000000; text-decoration:underline;}
a:link {color:#cccccc; text-decoration:none;}
a:visited {color:#cccccc; text-decoration:none;}
a:hover {color:#ff9900; text-decoration:none;}
a:active {color:#cccccc; text-decoration:none;}
</style>
</head>
<body>
<table id="tab">
<tr>
<td>
<p><a href="index.php">[ _ home]</a></p>
<p><a href="index.php">[ _ kompanie]</a></p>
<p><a href="index.php">[ _ service]</a></p>
<p><a href="index.php">[ _ kontakt]</a></p>
<p><a href="index.php">[ _ links]</a></p>
</td>
</tr>
</table>
<br />
hier kommt normaler text mit <a href="index.php" id="link_normal">link</a>
</body>
</html>
-->

grüsse vom raynor
 
danke für deine mühe, die du dir gemacht hast!!

leider hat das gestern mit dem beitrag nicht geklappt. der wollte ihn einfach nicht ganz darstellen. wollte dir zeigen, wie das mit dem mouseover aussehen soll...

der witz ist ja, dass es so auch geht... nur mit dem explorer noch nicht!

link_passiv.jpg


nach mouseover:

http://otis_ffm.macbay.de/link_aktiv.jpg

jetzt noch zum span tag, das ja die farbe auf blau hält, während das andere css die klammern rot färbt, bei mouseover:

html 4 referenz:

das span tag wurde eingeführt, damit sie stile sowie die steurerung von anzeige und ereignissen auf einen beliebigen abschnitt des dokumentinhalts anwenden können...

hoffentlich macht er mir jetzt den beitrag...
 
hi,

es ist reines "glück", dass es einige browser so darstellen, wie von dir gewünscht.
du musst den link als ganzes sehen, die klammern gehören dazu (in deinem beispiel).
"hover" gilt für den gesamten link und eben nur für den link (so ist dieses
pseudo-format jedenfalls gedacht).
natürlich kannst du die klammern vom text trennen und ihnen beispielsweise
eine andere farbe zuweisen - dann fällt aber "hover" dafür weg; das ist ja
dein malheur (im prinzip das gleiche, wie _ in +).

das span tag wurde eingeführt, damit sie stile sowie die steurerung von anzeige
und ereignissen auf einen beliebigen abschnitt des dokumentinhalts anwenden können...
Zum Vergrößern anklicken....

das stimmt für "transitional" und die einleitung eines inline-bereichs, bei "strict"
scheidet das body-tag aus. das div-tag leitet ein block-element ein.

grüsse vom raynor
 
@raynor

schau mal hier:

http://otis_ffm.macbay.de/index.php

habe gerade von einem freund testen lassen, der einen pc hat. bei dem gehen die klammern bei mouseover :eek:

viele grüße von ffm nach da
otis
 
hi otis,

danke, hab's mir mal eben angeschaut, das ergebnis ist wie gehabt (mac) - klar, es handelt sich
schliesslich um den von uns diskutierten code (inkl. des überflüssigen :rolleyes: ).
ich hatte auch ein wenig rumprobiert, leider ohne grossen erfolg. einiges umstellen und "div" hat
zwar immerhin die linke klammer "gehovert" (ie, mac), dafür aber den umbruch zerschossen.
so what, wenn du keine andere technik zur umsetzung des gewünschten effekts einsetzen möchtest,
dann enthältst du ihn "nur" einer minderheit vor, die - mangels nachschub - ohnehin in bälde umstellt.

da grüsst ffm
und
grüsse vom raynor
 
...nachtrag - vor lauter code...

denke an das impressum, bevor einer der "web-hilfssheriffs" darüber stolpert.

grüsse vom raynor
 
hi raynor,
die page ist noch voll in der mache. der ganze php code und verschiedene seiten und elemente fehlen noch.

wird aber werden...

danke für deine hilfe!

und viele grüße
otis

ach mist, der unnötige code verschwindet natürlich noch ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten