Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Hover-Effekt in Tabellen

Empfohlene Antworten

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?

Ich mach das immer so:


A:hover
{
color:#FF0000;
font-style:italic;
}
[/PHP]

Und das fluppt immer schnell.

und dein html src?

Ganz normaler Link.

So zum Beispiel:

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

deine verschachtelung der tabellen?

bei "normalen" geht das ohne Probleme genau so

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]

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

link

visited

hover

active

(focus)

gruss / zirri

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:

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

@cta: War es nicht. :rolleyes:

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.