✔ unterschiedl. Hover Effekte

Status
Nicht offen für weitere Antworten.
F

flashOr

Erfahrenes Mitglied
Hallo,
habe hier ein Problem und zwar möchte ich auf einer Seite verschiedene Links mit verschiedenen Hover Effekten belegen. Genauer, es soll sich die Hintergrundfarbe beim Überfahren mit der Maus einmal weiß und einmal schwarz färben.
Hab schon intensiv die Suche bemüht die mich aber immer wieder zu der selben Antwort führt und diese lautet Klassen. Allerdings funktioniert dies bei mir einfach nicht.
Hier der Code:
Code: 
body { font-family : verdana,arial,helvetica; font-size : 75%; color:#000000;}

A:link {
background-color : #CFEAF9;
padding : 3px;
border : 1px solid #939393;
text-decoration: none; }

A:visited {
background-color : #CFEAF9;
padding : 3px;
border : 1px solid #939393;
text-decoration: none; }


A:hover { }

.test1 {
background-color : #ffffff;
padding : 3px;
border : 1px solid #939393;
text-decoration: none; }

.test2 {
background-color : #000000;
padding : 3px;
border : 1px solid #939393;
text-decoration: none; }

Hier der HTML Code:
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="form.css">
<body>

<a class="test1" href="#">eins</a></td>

<a class="test2" href="#">zwei</a></td>





</body>
</html>
 
Dann mach's mal so:
HTML: 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="form.css">
    <style>
    <!--
    body
    {
      font-family: verdana, arial, helvetica;
      font-size: 75%;
      color: #000000;
    }
    .a1:link, .a1:visited, .a2:link, .a2:visited
    {
      background-color: #CFEAF9;
      padding: 3px;
      border: 1px solid #939393;
      text-decoration: none;
    }
    .a1:hover
    {
      background-color: #ffffff;
      padding: 3px;
      border: 1px solid #939393;
      text-decoration: none;
    }
    .a2:hover
    {
      background-color: #000000;
      padding: 3px;
      border: 1px solid #939393;
      text-decoration: none;
    }
    //-->
    </style>
  </head>
  <body>
    <a class="a1" href="#">eins</a>
    <a class="a2" href="#">zwei</a>
  </body>
</html>

redlama
 
Ich hätte da noch eine Frage.
Und zwar möchte ich für mein Menü eine andere Farbe für einen Link haben, generell soll der defaultwert aber bleiben.
Hier mal die css datei:
HTML: 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.Stil1 {
	font-family: Arial, Helvetica, sans-serif, "Arial Black";
	font-weight: bold;
	font-size: small;
	color: #FFFFFF;
}
.Stil1_m {
	font-family: Arial, Helvetica, sans-serif, "Arial Black";
	font-weight: bold;
	font-size: small;
	alink: #FFFFFF;
}
.Stil13 {color: #FFFFFF}
.stat {
  border-width:1px;
  border-style:solid;
  border-color:#003399;
  text-align:justify;
   }
.neu {
  border-width:1px;
  border-style:solid;
  border-color:#000076;
  text-align:justify;
   }
.neu_o {
  border-width:1px;
  border-style:solid;
  border-color:#CB6300;
  text-align:justify;
   }

.Stil20 {font-size: Kein}
.Stil26 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Stil27 {
	font-size: 12px;
	font-weight: bold;
}
A:link {      text-decoration: none;
	      color: #003399; }
		 
A:visited {    text-decoration: none;
              color: #003399; }
			
A:active {     text-decoration: none;
	      color: #003399; }
			  
A:hover {      text-decoration: none;
	      color: #8AB0FF; }
Bitte nicht wundern, wurde teilweise einfach von Dreamweaver übernommen.
Geht das, wenn ja, wie?
Die Methode von redlama funktionierte nicht ganz, außerdem möcht ich eigentlich nicht jedem Link ein format geben. Eben nur für das menü.
Wäre für Hilfe sehr dankbar.

IF

p.s. Ich hab von css keinen blassen schimmer :)
 
Code: 
A:link {      text-decoration: none;
	      color: #003399; }
		 
A:visited {    text-decoration: none;
              color: #003399; }
			
A:active {     text-decoration: none;
	      color: #003399; }
			  
A:hover {      text-decoration: none;
	      color: #8AB0FF; }

A:link.navi {      text-decoration: none;
	      color: #003399; }
		 
A:visited.navi  {    text-decoration: none;
              color: #003399; }
			
A:active.navi  {     text-decoration: none;
	      color: #003399; }
			  
A:hover.navi  {      text-decoration: none;
	      color: #8AB0FF; }
Mit diesem Code behalten deine Links alle den Anfangswert und den Links der Navigation kannst du die Klasse "navi" zuweißen und sie getrennt definieren.
 
Vielen Dank für die Antwort.
Leider funktioniert es ist. Die navi ist auch mit dem Stil1 klassifiziert. Wenn ich das ganze in navi änder, tut sich leider nichts. Warum?
 
@ InFlame: Poste doch mal bitte den kompletten Seiten-Quelltext, damit wir einen Einblick gewinnen, mit welchen HTML-Elementen die Seite aufgebaut, und in welchem Element (DIV, TD, LI) deine Navigation eingebettet ist. Anhand deines CSS-Codes lässt sich der Fehler bzw. das Problem schwer lokalisieren.


Thanx, maik.l
 
InFlame hat gesagt.:
Vielen Dank für die Antwort.
Leider funktioniert es ist. Die navi ist auch mit dem Stil1 klassifiziert. Wenn ich das ganze in navi änder, tut sich leider nichts. Warum?
Zum Vergrößern anklicken....
Du kannst einem Objekt auch zwei Klassen zuweißen.
Code: 
class="Stil1 ,  navi"
Aber wie michaelsinterface schon gesagt hat wäre ein Codefetzen oder ein Link zur Seite nicht schlecht.
 
HTML: 
<body>
<div align="center"> 
  <table width="826" high="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="800">
        <div align="left"><a href="index.php"><img src="img/logo_o_n3.jpg" width="791" height="31" border="0" alt="zur Hauptseite"></a></div>
      </td>
    </tr>
    <tr bgcolor="#CB6300">

<!-- NAVI -->

      <td bgcolor="#003399"><div align="center"></div>        <div align="right" class="Stil1, navi"><a href="index.php?s=list&show=4&id=0">dvds</a> | suchen | drucken</div></td>
    </tr>
    <tr bgcolor="#CB6300">

Hier wäre der mehr oder weniger wichtige Teil. Leider funktioniert es immer noch nicht. Der in Stil1 festgelegte Stil wird komplett irgnoriert und der Link ist mit den Standart werten belegt... :(
 
Der CSS Code wäre noch ganz interessant. ;)

Wenn du die Klasse navi wie oben definiert hast kannst du sie nur <a> Objekten zuweißen, sprich wenn du
Code: 
<a class"navi" href....>
schreibst sollte es gehen.

Allgemein:
Den oberen div Container kannst du dir sparen und das align="center" direkt in den <table> Tag setzten. Du solltest allerdings align nicht mehr verwenden da es als verältet deklariert ist.

edit: sry hab gerade gesehen, dass ganz oben ja der CSS Code schon gepostet wurde.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück