XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hover effekt auf ganze TD zelle (http://xhtmlforum.de/showthread.php?t=65114)

gandalf_hh 09.07.2011 16:25

Hover effekt auf ganze TD zelle
 
leute wer kann mir in meine TD ZELLE einen hover einbauen?
wenn ich mit der maus rauf gehe dann soll die gaze zelle in eine andere farbe läuchten.

<table>
<tr>
<td style="width:180px; background-color:#000;">
<span style="float:left;">NIKE AIR MAX</span>
<span style="float:right;">60€</span></td>
</tr>
</table>

Manfred62 09.07.2011 17:48

Schon mal an :hover gedacht? Geht aber nicht in alten IE (ohne js).

Manfred

gandalf_hh 10.07.2011 12:27

weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

hubspe 10.07.2011 12:41

Zitat:

Zitat von gandalf_hh (Beitrag 497571)
weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

äh...und was hat jetzt Java mit der von Manfred vorgeschlagenen Lösung zu tun?? :?

gandalf_hh 10.07.2011 12:44

damit wollte ich sagen das ich an java lösungen nicht denke :)

gaby 10.07.2011 12:54

Zitat:

Zitat von gandalf_hh (Beitrag 497571)
weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

JS ist JavaScript, nicht Java.
Aber auch hier ist nicht garantiert, daß alle Besucher es aktiviert haben, und den Hovereffekt auch sehen.

SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

In älteren IEs wirkt die Pseudoklasse :hover nur auf A-Elemente, also nur auf Links und Anker.

Du könntest also einen Link in die Tabellenzelle legen, der die Zelle zu 100% ausfüllt, und dann diesen Link hovern. Das würde dann auch in älteren Browsern angezeigt werden.

Hover in Tabellenzelle
(wg Schrottwerbung JS aktivieren)

Diese Methode hätte aber den Nachteil, daß die Seite immer wieder hochspringt, wenn der Besucher auf den Link klickt, und dieser die aktuelle Seite referenziert.

Demo hier:
Hover in Tabellenzelle-2

gandalf_hh 10.07.2011 13:00

mit li macht man ja eigentlich menüs. kann ich damit nicht tabellen machen? bei li hat man solche hover probleme nicht.


<table>
<tr>
<td:hover background-color:#fff style="width:180px; background-color:#000;">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>
ich habe es so versucht aber es hat nicht geklappt

gaby 10.07.2011 13:15

Zitat:

Zitat von gandalf_hh (Beitrag 497575)
mit li macht man ja eigentlich menüs. kann ich damit nicht tabellen machen? bei li hat man solche hover probleme nicht.


<table>
<tr>
<td:hover background-color:#fff style="width:180px; background-color:#000;">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>
ich habe es so versucht aber es hat nicht geklappt

Hast du dir meine verlinkte Seite von Selfhtml durchgelesen?
Dort wird beschrieben, an welcher Stelle :hover zu deklarieren ist.

gandalf_hh 10.07.2011 13:37

ich habe es mir durchgeschaut und kein td:hover beispiel gefunden, nur ein h1:hover beispiel.

nun hab ich es einmal damit umsetzen wollen aber hat nicht geklappt und ein versuch hatte ich noch gemacht mit JS, was ich glaub ich noch vergessen habe zu erwähnen, die zelle soll ganz mit hover gefüllt sein UND die ganze zelle soll als link funktionieren. so wie bei einem LI menü


<head>
<style type = text/css>
a:hover { font-weight:bold; color:#FFF; background-color:#0F0; text-decoration:none; }
td:hover { background-color:silver; }
</style>
</head>
<body>


<table>
<tr>
<td style="width:180px; background-color:#000;">
<a href=""><span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></a></td>
</tr>
</table>

<br /><br />

<table>
<tr>
<td onMouseOver="this.style.backgroundColor='#60ff00'; "onMouseOut="this.style.backgroundColor='#ff80 ff'" style="width:180px; background-color:#000; color:#FFF">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>

</body>
</html>

gaby 10.07.2011 14:09

PHP-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
>
<
HTML>

<
HEAD>
<
TITLE>Hover und Positionieren in Tabellenzelle</TITLE>
<
META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
STYLE type="text/css">


body {
    
margin0;
    
padding0;
    
font-family Verdanasans-serif;
    
font-size:100.01%;
    
background-color:#e1e1e1;   }




table  {
     
background-color:#eee;
     
width:100%;
     
border0.4em ridge #ccc;  }

td  {    
    
positionrelative
    
width180px
    
background-coloryellow
 }
     

td .tab {
    
positionrelative
    
height100%;
    
width100%;
    
border2px dotted red;
    }

td div:hover {
   
background-colorred }


</
STYLE>
</
HEAD>

<
BODY>

<
div style="width: 400px; margin: auto;  border: 1px solid;">



<
table>
<
tbody>
    <
tr>
        <
td
            <
div class="tab"
                <
divNIKE AIR MAX </div>
                <
div style="position: absolute; top: 0; right: 0;"60€ </div>
            </
div>
        </
td>
    </
tr>
</
tbody></table>

</
div>

</
body>
</
HTML

Das "div:hover" wird aber in älteren IEs nicht funktionieren.


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020