nicht angemeldet
Zellenhintergrund ändern (HOVER)
Hallo,
kann mir mal bitte jemand erklären ob und wie ich per CSS ein Zellenformat einer bestimmten Zelle einer Tabelle ändern kann wenn jemand mit der Maus auf diese Zelle zeigt ?
a:hover auf eine Zelle funktioniert nicht, weil ich nicht die ganze Zelle berlinken kann. Naiv wie ich bin versuchte ich td:hover, auch das funktioniert nicht.
Weis jemand rat ? (Bitte keine JS Antwort,. die kenne ich selbst)
mfg
Kalle
-
Hallo,
Naiv wie ich bin versuchte ich td:hover, auch das funktioniert nicht.
Das funktioniert schon, nur brauchst du dafür einen richtigen Browser. Veraltete Browser wie der NS4 und der IE können so was natürlich nicht.
Grüße
Jeena Paradies-
Das funktioniert schon, nur brauchst du dafür einen richtigen Browser. Veraltete Browser wie der NS4 und der IE können so was natürlich nicht.
Hast Du einen anderen Vorschlag um das Problem per CSS zu lösen,.. ich mag meinen Besuchern ungern den Browser vorschreiben :-)
Danke Kalle
-
Hallo,
Hast Du einen anderen Vorschlag um das Problem per CSS zu lösen,.. ich mag meinen Besuchern ungern den Browser vorschreiben :-)
Naja du kannst wenn du da einen Link hast für den Link 100% Breite angeben und margin + padding auf 0 Setzen. Dann ist die ganze Zelle ein Link und lässt sich per a:hover ändern. Ich weiß allerdings nicht ob du überall wo du es einsetzen willst auch Links hast. Wenn nicht dann geht es glaube ich nur per JS oder nur in neuen Browsern.
Grüße
Jeena Paradies -
Hallo,
Hast Du einen anderen Vorschlag um das Problem per CSS zu lösen,..
Wenn Du nur einen Link pro Zelle hast, kannst Du mit CSS
sagen, dass der Link die ganze Zelle fuellen soll:td a { display:block; }
ich mag meinen Besuchern ungern den Browser vorschreiben :-)
Musst Du auch nicht.
Es hat ja niemand einen Nachteil, wenn ein optisches Detail
nicht funktioniert.
Du koenntest also ruhig
td:hover { ... }
benuetzen.
Wer einen guten Browser (z.B. Mozilla) hat, sieht den
optischen Effekt, wer einen veralteten Browser (z.B. MS IE)
hat, sieht halt keinen Effekt...Gruesse,
Thomas
--
Dank /my/ automatisch ausgeblendet: JavaScript, ASP.
Manuell "ausgeblendet": Threads mit Frames, Iframes und Scrollbalken im Subject...
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
-
-
-
Hi,
a:hover auf eine Zelle funktioniert nicht, weil ich nicht die ganze Zelle berlinken kann.
doch, kannst Du. Siehe Archiv.
Naiv wie ich bin versuchte ich td:hover, auch das funktioniert nicht.
Doch, tut es. Nur nicht in Browsern, die technisch anno 1998 stehengeblieben sind.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
gruss Lesende,
fuer alle interessierten (da diese frage im letzten monat des alten jahres haeufiger auftrat) eine testseite, die, so glaube ich, nur mit der reinen lehre arbeitet, aber auch keinen anspruch auf die komplette aufarbeitung des themas "+browser +table +css +javascript +hover" erhebt:
<?xml version="1.0" encoding="ISO-8859-1"?> <!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="en">
<head> <title>tableHighlighting.html</title> <style type="text/css"> /<![CDATA[/ html, body { background-color: #eeeeee; /* #f5f5f5 */ color: #000000; font-size: 101%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
/* - [DE] opera und mozilla setzen folgende anweisungen mit leichtigkeit um; - [EN] opera and mozilla handle this with ease; - [DE] MSIE ist voellig ahnungslos hinsichtlich fortschrittlicherer selektoren-konzepte; - [EN] MSIE has no clue of any of the more advanced selectors and display-attribut-values; / table { display: table; table-layout: auto; / fixed / } table>thead {display: table-header-group;} / "thead" - allowed within: "table" only - can enclose: "tr" only / table>tfoot {display: table-footer-group;} / "tfoot" - allowed within: "table" only - can enclose: "tr" only / table>colgroup {display: table-column-group;} / "colgroup" - allowed within: "table" only - can enclose: "col" only / table col {display: table-column;} / "col" - allowed within: "table", "colgroup" - empty element / table tr {display: table-row;} / "tr" - allowed within: "table", "tbody", "tfoot", "thead" - can enclose: "td", "th" / table td {display: table-cell;} / "td" - allowed within: "tr" only - can enclose: "blocklevel"- and "inline"- elements */
/* - [DE] funktioniert perfekt in opera 7++; - [EN] does it perfectly in opera 7++; - [DE] fuer denselben effekt benoetigt der MSIE eigene klassen; - [EN] use universal classes for same effect in MSIE; - [DE] mozilla reagiert auf die folgenden regeln ueberhaupt nicht; - [EN] mozilla won't show any effect at all (not even with the classes that work for MSIE); */ table#test01>colgroup { background-color: #ff9933; } table#test01>colgroup+colgroup { background-color: #ffcc66; }
/* - [DE] leider ist keiner der aktuellen windows-basierten-css-freundlichen-browser wie mozilla 1.5 oder opera 7.x in der lage, die dynamische pseudo-klasse "hover" auf die elemente "colgroup" bzw. "col" anzuwenden; - [EN] unfortunately none of the current windows-based-css-friendly-browsers like mozilla 1.5 or opera 7.x does handle the dynamic pseudo-class "hover" for the elements "colgroup" respectively "col"; */ table#test01>colgroup>col:hover { background-color: #ff6600; font-weight: bold; }
/* - [DE] opera und mozilla setzen folgende anweisungen mit leichtigkeit um; - [EN] opera and mozilla handle this with ease; - [DE] MSIE ist voellig ahnungslos hinsichtlich fortschrittlicherer selektoren-konzepte; - [EN] MSIE has no clue of any of the more advanced selectors; / table#test01 tr { / [DE] MSIE versteht nur diese regel / [EN] MSIE recognizes this rule only / text-align: right; } table#test01>tbody>tr:hover { background-color: #ff6600; /font-weight: bold;/ / [DE] hier wird es opera zu viel / [EN] too much for opera 7.x / } table#test01>tbody>tr>td:hover { background-color: #cc3300; /color: #ffffff;/ / [DE] hier wird es opera zu viel / [EN] too much for opera 7.x */ }
/* - [DE] das sind die schon oben erwaehnten zusaetzlichen klassen, die dem MSIE auf die spruenge helfen; - ungluecklicherweise ist mozilla hier ebenfalls stoerrisch;
- [EN] that's the above mentioned fix for MSIE in order to manage the columns appearance by styling "colgroup"- and "col"- elements; - sadly mozilla ignores this; / .colOdd { background-color: #ff9933; } .colEven { background-color: #ffcc66; } /]]>*/ </style> <script type="text/javascript"> //<![CDATA[ function tableCellOver(nodeObject,cssTextCell,cssTextRowCol) { if (!jsToggle.status) {return;} if ((typeof(nodeObject) == "object") && (nodeObject !== null) && nodeObject.nodeType && nodeObject.nodeName && (nodeObject.nodeType == 1) && (nodeObject.nodeName.toLowerCase() == "td")) { var currentColumn = 0; var currentRow = -1; var i = 0; var rowNode = nodeObject.parentNode; var cellNode = rowNode.firstChild; var tbodyNode = rowNode.parentNode; while (cellNode && (cellNode != nodeObject)) { if (cellNode.nodeType == 1) { currentColumn++; } cellNode = cellNode.nextSibling; } while (rowNode) { if (rowNode.nodeType == 1) { currentRow++; } rowNode = rowNode.previousSibling; } rowNode = nodeObject.parentNode; tbodyNode = rowNode.parentNode;
var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "rows [ " + tbodyNode.rows.length + " ]-columns [ " + rowNode.cells.length + " ] - row [ " + (currentRow+1) +" ]-column [ " + (currentColumn+1) + " ]";
tbodyEventFieldNode.value = statusText; window.top.status = statusText;
if (document.all && !window.opera) { for (i=0; i<rowNode.cells.length; i++) { rowNode.cells[i].style.cssText = cssTextRowCol; } } for (i=0; i<tbodyNode.rows.length; i++) { tbodyNode.rows[i].cells[currentColumn].style.cssText = cssTextRowCol; } nodeObject.style.cssText = cssTextCell; } } function tableCellOut(nodeObject) { if (!jsToggle.status) {return;} if ((typeof(nodeObject) == "object") && (nodeObject !== null) && nodeObject.nodeType && nodeObject.nodeName && (nodeObject.nodeType == 1) && (nodeObject.nodeName.toLowerCase() == "td")) { var currentColumn = 0; var currentRow = -1; var i = 0; var rowNode = nodeObject.parentNode; var cellNode = rowNode.firstChild; var tbodyNode = rowNode.parentNode; while (cellNode && (cellNode != nodeObject)) { if (cellNode.nodeType == 1) { currentColumn++; } cellNode = cellNode.nextSibling; } while (rowNode) { if (rowNode.nodeType == 1) { currentRow++; } rowNode = rowNode.previousSibling; } rowNode = nodeObject.parentNode; tbodyNode = rowNode.parentNode;
var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "rows [ " + tbodyNode.rows.length + " ]-columns [ " + rowNode.cells.length + " ] - row [ " + (currentRow+1) +" ]-column [ " + (currentColumn+1) + " ]";
tbodyEventFieldNode.value = statusText; window.top.status = statusText;
if (document.all && !window.opera) { for (i=0; i<rowNode.cells.length; i++) { rowNode.cells[i].style.cssText = ""; } } for (i=0; i<tbodyNode.rows.length; i++) { tbodyNode.rows[i].cells[currentColumn].style.cssText = ""; } nodeObject.style.cssText = ""; } }
function jsToggle() { jsToggle.status = !jsToggle.status; var jsToggleButtonNode = document.forms["masterForm"].elements["jsToggleButton"]; var tbodyEventFieldNode = document.forms["masterForm"].elements["tbodyEventField"]; var statusText = "toggle javascript - status: " + ((jsToggle.status) ? ("ON") : ("OFF")); jsToggleButtonNode.title = " " + statusText + " "; jsToggleButtonNode.value = statusText; tbodyEventFieldNode.value = ((jsToggle.status) ? ("") : ("no js at all - effects are powered by pure css")); window.top.status = ""; }; jsToggle.status = true; //]]> </script> </head>
... teil 2 folgt sogleich ...
--
sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:)-
... 2ter teil:
<body>
<table id="test01" rules="rows" cellpadding="5" border="0">
<colgroup class="colOdd">
<col />
<col class="colEven" />
<col />
</colgroup>
<colgroup class="colEven">
<col />
<col class="colOdd" />
<col />
</colgroup>
<thead>
<tr>
<th>thead 01<br /><br /></th>
<th>thead 02<br /><br /></th>
<th>thead 03<br /><br /></th>
<th>thead 04<br /><br /></th>
<th>thead 05<br /><br /></th>
<th>thead 06<br /><br /></th>
</tr>
</thead>
<tfoot>
<tr>
<td><br />tfoot 01<br /></td>
<td><br />tfoot 02<br /></td>
<td><br />tfoot 03<br /></td>
<td><br />tfoot 04<br /></td>
<td><br />tfoot 05<br /></td>
<td><br />tfoot 06<br /></td>
</tr>
</tfoot>
<tbody>
<tr>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 01<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 02<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 03<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 04<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 05<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 01<br />col 06<br /></td>
</tr>
<tr>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 01<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 02<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 03<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 04<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 05<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 02<br />col 06<br /></td>
</tr>
<tr>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 01<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 02<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 03<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 04<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 05<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 03<br />col 06<br /></td>
</tr>
<tr>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 01<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 02<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 03<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 04<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 05<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 04<br />col 06<br /></td>
</tr>
<tr>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 01<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 02<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 03<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 04<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 05<br /></td>
<td onmouseover="tableCellOver(this,'background-color:#cc3300','background-color:#ff6600')" onmouseout="tableCellOut(this)">row 05<br />col 06<br /></td>
</tr>
</tbody>
</table>
<br /><br />
<form id="masterForm">
<input type="text" name="tbodyEventField" title="mouse event info line" size="43" value="" onfocus="this.blur()" disabled="disabled" />
<input type="button" name="jsToggleButton" title=" toggle javascript - status: ON " value="toggle javascript - status: ON" onclick="jsToggle()" onfocus="this.blur()" />
</form>
</body></html>
by(t)e by(t)e - peterS. - pseliger@gmx.net
--
sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:) -
hi,
... teil 2 folgt sogleich ...
wäre es nicht einfacher und komfortabler, wenn du das ganze einfach als online-beispiel bereitstellen würdest ...?
;-)gruss,
wahsaga-
gruss wahsaga,
wäre es nicht einfacher und komfortabler, wenn du das ganze einfach als online-beispiel bereitstellen würdest ...?
;-)Du hast recht - http://www.pseliger.de/testCases/tableHighlighting.html
by(t)e by(t)e - peterS. - pseliger@gmx.net
--
sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:)
-
-