Hover mit CSS und Typo3 geht nicht / Problem / Fehler ?

imberg · #1 22.12.06, 09:56

Hallo T3-Gemeinde,

ich möchte mittels CSS einen Bildaustausch beim überfahren/hovern einer Table (in einer Extension) realisieren.

Das Test-HTML File verhält sich auch genau wie gewünscht:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!--
	html,body	{
		margin: 0;
		padding: 0;
		background-color: #FFFFFF;
		color: #000000;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 100%;
	}
	
	table {
		table-layout: auto; /* auto=default | fixed kann der Opera nicht */
		width: 80%;
		margin: 9%;
		border-spacing: 3px 12px;	
		border-collapse: separate;	
		border: 1px solid #000000; 
		background-color: #FFEE22;
		}
	table:hover {
		background-color: #CC3333;
		}
	
	tr	{
		background-color: #EBE7D8;
		}
	tr:hover {
		background-color: #33CC33;
		}
	
	td	{
		border: 2px groove #FFFFFF; 
		padding: 1px 3px 1px 3px;
		font-size: 0.7em;
		}
	td.TEST	{
		width: 200px;
		height: 200px;
		border: 2px groove #FFFFFF; 
		padding: 1px 3px 1px 3px;
		font-size: 0.7em;
		background:url(A1-1.jpg)
		}
	td:hover {
		background-color: #3333CC;
		}
	td:hover.TEST {
		background-color: #FF0000;
		background:url(A1-2.jpg);
		}

	

	--> </style> </head> <body> <table> <tr> <td>xxx</td> <td class="TEST">xxxTestxxx</td> <td>xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr> </table> </body></html>

In der Test-Zelle wird im Normalzustand halt das Bild A1-1.jpg angezeigt und beim drüber fahren (hover) das Bild A1-2.jpg.

Für T3 lese ich dann ein CSS ein:

Typoscript-Code:

1:
2:
3:
4:

page.includeCSS {
file1 = fileadmin/templates/res/stylesheet.css
file3 = fileadmin/templates/res/hovereffekt.css
}

welches so aussieht:

HTML-Code:

table.ImageA1  
{
background:url(uploads/tx_extension/A1-1.jpg);
}

table:hover.ImageA1  
{
background:url(uploads/tx_extension/A1-2.jpg);
}

In der Normalansicht wird auch das Bild A1-1.jpg angezeigt, aber beim hovern passiert nicht ...

Hat jemand eine Idee, was ich da falsch mache?

Grüße
Ralf

n2o · #2 19.01.07, 11:16

Was für eine Extension ist den das?
Es gibt durchaus Extension die ihre CSS Dateien anderst einbinden bzw vileicht musst du erst die alten CSS angaben löschen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Typo3, TemplaVoila, CSS - Hover Effekt wird ignoriert	caustics	TYPO3 4.x Fragen und Probleme	10	10.04.08 12:22
navigation problem mit ro rollover hover	rastpati	TYPO3 4.x Fragen und Probleme	1	07.12.07 15:53
typo3 Installation geht nicht	getit	TYPO3 4.x Installation und Updates	2	20.07.07 22:19
Paßwort für Typo3 4.1 Installation geht nicht	surtur23	TYPO3 4.x Installation und Updates	3	26.06.07 00:31
Fehler nach Update auf 4.0.1 - GMENU geht nicht mehr	andre.spindler	TYPO3 4.x Installation und Updates	1	10.08.06 00:06

Suche

Userpanel

Hover mit CSS und Typo3 geht nicht / Problem / Fehler ?