zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hover effekt auf ganze TD zelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.07.2011, 16:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard 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>

Geändert von gandalf_hh (09.07.2011 um 16:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.07.2011, 17:48
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.07.2011, 12:27
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 10.07.2011, 12:41
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.088
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
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??
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 10.07.2011, 12:44
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

damit wollte ich sagen das ich an java lösungen nicht denke
Mit Zitat antworten
  #6 (permalink)  
Alt 10.07.2011, 12:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
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

Geändert von gaby (10.07.2011 um 13:10 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.07.2011, 13:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 10.07.2011, 13:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.07.2011, 13:37
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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>

Geändert von gandalf_hh (10.07.2011 um 13:40 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.07.2011, 14:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

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.

Geändert von gaby (10.07.2011 um 14:12 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 19:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:10 Uhr.