Hover-Effekt in Tabellen

Nyna · 16. November 2003

Hallo,

ich habe per CSS einen Hover-Effekt auf Links gelegt. Die Links bekommen einen Rahmen und eine Hintergrundfarbe.

Das ganze funktioniert perfekt. Sobald ich die Links aber in eine Tabelle setze, verzögert sich der Hover-Effekt merklich.

Hat jemand einen Tipp, wie man das optimieren kann?

CyberDemon · 16. November 2003

Kannst Du mal den Code posten?

Vampire · 16. November 2003

Ich mach das immer so:



A:hover

{

	color:#FF0000;

	font-style:italic;

}

[/PHP]

Und das fluppt immer schnell.

kills · 17. November 2003

und dein html src?

Vampire · 17. November 2003

Ganz normaler Link.

So zum Beispiel:

<A href="http://forum.fachinformatiker.de">FI Forum</A>

kills · 17. November 2003

deine verschachtelung der tabellen?

bei "normalen" geht das ohne Probleme genau so

Nyna · 18. November 2003

Sorry, dass ich mich nicht mehr zu Wort meldete. Aber hier jetzt einmal der Code. Bitte nur Kommentare zum eigentlichen Problem, das alles ist "quick&dirty" zusammengeschustert und teilweise falsches HTML.

Bei mir läuft das mit dem Hover außerhalb der Tabelle sauber und schnell, die Links in der Tabelle mit Verzögerung. Die CSS-Bausteine sind auch völlig vermurkst, wahrscheinlich liegt es daran...

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">

<html>

<head>

 <title>gaga</title>

 <style type="text/css">

 <!--

a.linkindex {

 color:#FF0000;

 font:bold; 

 font-family:verdana;

 font-size:11px;

 text-decoration:none; }


a.linkindex:active {

 color:#0000FF;

 font:bold; 

 font-family:verdana;

 font-size:11px;

 border-left:2px solid #ffdddd;

 padding:2px;

 text-decoration:none; }


a.linkindex:hover {

 color:#000000;

 font-family:verdana;

 font-size:12px;

 background-color:#555555;

 border:2px solid #ff0000;

 padding:2px;

 text-decoration:none; }


a.linkindex:visited {

 color:#666666;

 font-family:verdana;

 font-size:11px;

 padding:2px; 

 text-decoration:none; }

-->

</style>

</head>


<body>


<br><a href="news.htm" class="linkindex" target="news">0000000001</a>

<br><a href="news.htm" class="linkindex" target="news">0000000002</a>

<br><a href="news.htm" class="linkindex" target="news">0000000003</a>

<br><a href="news.htm" class="linkindex" target="news">0000000004</a>

<br><a href="news.htm" class="linkindex" target="news">0000000005</a>

<br><a href="news.htm" class="linkindex" target="news">0000000006</a>

<br><a href="news.htm" class="linkindex" target="news">0000000007</a>

<br><a href="news.htm" class="linkindex" target="news">0000000008</a>

<br><a href="news.htm" class="linkindex" target="news">0000000009</a>

<br><a href="news.htm" class="linkindex" target="news">0000000010</a>

<br><a href="news.htm" class="linkindex" target="news">0000000011</a>

<br><a href="news.htm" class="linkindex" target="news">0000000012</a>

<br><a href="news.htm" class="linkindex" target="news">0000000013</a>

<br><a href="news.htm" class="linkindex" target="news">0000000014</a>

<br><a href="news.htm" class="linkindex" target="news">0000000015</a>

<br><a href="news.htm" class="linkindex" target="news">0000000016</a>


<table cellspacing="0" cellpadding="0" width="760" align="center" border="0">

 <tr>

  <td height="80"> </td>

 </tr>

 <tr>

  <td valign="top" align="left" background="xyz.jpg" height="16">

   <font face="verdana" size="2" color="#555555">

   <img src="pix/x.gif" border="0" height="5" width="45">

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>|

   <a href="menue01.htm" target="_self">menue01</a>

   </font>

  </td>

 </tr>

 <tr>

  <td background="xyz.jpg"height="21">


   <table width="670" align="center" cellpadding="20" cellspacing="0" border="1">

    <tr>

     <td width="200"valign="top">

      <br><a href="news.htm" class="linkindex" target="news">0000000001</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000002</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000003</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000004</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000005</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000006</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000007</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000008</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000009</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000010</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000011</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000012</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000013</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000014</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000015</a>

      <br><a href="news.htm" class="linkindex" target="news">0000000016</a>

     </td>

   <td>

      <br>


      <table border="1" cellpadding="0" cellspacing="0" style="color:black;

 border:1px solid #CFC799;">

       <tr>

        <td>

         <iframe name="xxx" src="xyz.htm" frameborder="1" width="470" 

height="390" scrolling="yes"></iframe>

        </td>

       </tr>

      </table>


     </td>

    </tr>

   </table>


  </td>

 </tr>

 <tr>

  <td valign="top" align="middle" background="xyz.jpg" height="16"> </td>

 </tr>

</table>


</font>


</body>

</html>[/php]

zirri · 19. November 2003

beim definieren von pseudoformaten der A-CSSes immer auf die folgende reihenfolge achten :

link

visited

hover

active

(focus)

gruss / zirri

-cta- · 19. November 2003

du benutzt einen iframe....wenn du da die links mit hover-effekt versehen willst, musst du das auch in der datei, die im iframe sitzt angeben:D

wenn das dein problem war.... :rolleyes:

Nyna · 19. November 2003

@zirri: Ist richtig, für das Problem aber unerheblich.

@cta: War es nicht. :rolleyes:

Anmelden

Hover-Effekt in Tabellen

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte