kann man einen hover untergliedern?

Status
Nicht offen für weitere Antworten.
S

Samonis

Mitglied
hallo ich hatte ein problem mit meiner hovernavigation:

wollte dass mit deim backgroundimage immer links neben der navi ein bild aufleuchtet wenn man natürlich über den link fährt. also im css in den a:hover reingeschrieben. firefox macht das auch schön, nur der ie machts nicht.
kann ich als lösung jedem link ein hoverelement zuordnen, dass dann das bild aufrufen würde?

wie würde soetwas aussehen?

a:hover.index {
blabla
}



bitte um hilfe
 
Bitte achte auf eine korrekte Grammatik und Rechtschreibung (inkl. Groß-/ Kleinschreibung) und eine sinnvolle, klare Fragestellung bzw. Antwort. Mehr dazu findest Du in unserer Netiquette.
Zum Vergrößern anklicken....

Achte bitte auf eine korrekte auf Gross und Kleinschreibung
Dankeschön!
 
Ok werde mir mehr Mühe geben wegen Groß-Klein.
Also kann mir jemand sagen obs geht, oder sind das nur Mutmaßungen?

Vorallem wie spreche ich dann den speziellen Link im Text an? Ist das dann eine Klasse oder wie?
 
Zuletzt bearbeitet:
Es geht definitiv.. keine mutmaßung, viele hier haben es getan.
Ja, es sind klassen.
Syntax dazu steht weiter oben schon einmal:
a.index:hover
 
Code: 
a.navi{
font-size: 13px;
font-weight: bold;
text-decoration: none;
padding-left:16px;
}
a.navi:link {
Color: #309;
}
a.navi:visited {
Color: #309;
}
a.navi:hover {
Color: #00F;
background: url(images/cross.gif) left no-repeat;
}
Der Link schaut dann so aus:
HTML: 
<a href="Link.htm" class="navi">Link</a>
Das funktioniert bei mir mit FF und IE.
 
waaaaaah!

Hallo
Nachdem ich jetzt gestern und Heute noch immer an diesem Problem rumsaß, frag ich jetzt nochmal.

Ich habe jetzt meine CSS hover untergliedert:

a.index:hover
{
font-family: Verdana;
font-size: 12px;
font-weight: bold;
color: #f60;
background-image: url(../images/dot.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}

a.gallery:hover
{
font-family: Verdana;
font-size: 12px;
font-weight: bold;
color: #f60;
background-image: url(../images/dot.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
}
....

und es getestet. Im IE wurde wieder nur der erste Link mit meinem Image angezeigt. Also hab ich getestet und rumprobiert. Als ich beim zweiten Navipunkt dann mehr Pixel bei der Backgroundposition eingegeben habe, kam auf einmal auch das Bild beim zweiten. Die Freude war groß.
Ich hatte beim ersten Link

background-position: 0px 5px;

und bei allen anderen

background-position: 0px 18px;

und es sah gut aus. Also in FF gegangen und was war? nur der erste Link funktionierte und alle anderen nicht mehr! FF zeigt es an wenn alle LInks

background-position: 0px 5px;

haben. aber WISO braucht der IE beim zweiten Link einen höheren Wert um das Bild anzuzeigen?

Ich include meine Navi in die Index. Ich stelle jetz die Navi und die Index rein, vllt ist es ja auch nur ein beschissener Fehler, aber ich hab keinen Plan mehr was ich machen soll:

Index:

HTML: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>startseite</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</style>
</head>
<body bgcolor="#CACACA">
<div id="rahmen" class="rahmen"></div>
<div class="balken"></div>
<div id="rahmenlinksinnen" class="rahmenlinksinnen"></div>
<div class="mann"></div>
<div class="samonis"></div>
<div class="ecke"></div>
<?php
include ("navigation/navi_index.php");
?>

</body>
</html>


HTML: 
<div class="navi">
<a href="index.php" title="Hauptseite" class="index">&nbsp;&nbsp;Index</a>

<a href="foto/foto.html" title="Fotos" class="gallery">&nbsp;&nbsp;Gallery</a>

<a href="me/me.html" title="About me" class="about">&nbsp;&nbsp;About&nbsp;me</a>

<a href="links/links.php" title="Links" class="links">&nbsp;&nbsp;Links</a>

<a href="kontakt/kontakt.php" title="Kontakt" class="kontakt">&nbsp;&nbsp;Kontact</a>

</div>
 
Sorry dass ich keine Antwort auf deine Frage habe..
Ich habe ähnliche Probleme mit CSS und Firefox und damit ich nicht sinnlos ein neues Thema anfange (meine Frage passt gut zu dem Thema hier), füge ich eben mein Problem hier hinzu.

Ich habe ein einfaches Menu erstellt, dass aus gewöhnlichen Links besteht, die mit CSS formatiert sind.

Code: 
a.menu {
   font-family:Verdana, Arial, Tahoma;
   font-size: 11px;
   font-weight: 600;
   width: 150px;
   height: 20px;
   padding: 3px;
}
a.menu:link {
   color:#000000;
   background-color:#FFFFFF;
}
a.menu:hover {
   color:#FFFFFF;
   background-color:#000000;
}

Damit soll bewirkt werden, dass sich beim Mousover Hintergrund- und Textfarbe austauschen. Im IE funktioniert es wunderbar.
Aber im Firefox wird die angegebene Breite und Höhe nicht berücksichtigt.
Die Links sind genau so hoch und breit wie der Text selbst.
Gibt es im Firefox etwas zu beachten?

Danke schon mal und Gruß,
Deleted
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück