[英]PHP & CSS: How to get hover effect for each row of a table?
我正在使用此代碼顯示事件。 每個事件都是可單擊的,但是為此我確實需要背景色的懸停效果。 也許沒有JavaScript也可能嗎?
<table class="tableLine">
<tr>
<th>Wann?</th>
<th>Was?</th>
<th>Wer?</th>
<th>Wo?</th>
</tr>
<?php
$all_events = array();
$ten_events = array();
for($i = 0; $events = mysql_fetch_object($events_resource); $i++){
if($i < 9){
$ten_events[] = $events;
}
$all_events[] = $events;
}
$i = 0;
foreach($ten_events as $event){
$row = $i % 2;
echo "<tr onclick=\"window.location.href = '?page=single_event&id=$event->id'\" style=\"cursor: pointer;\">
<td class='row_{$row}'>{$event->de_date}</td></a>
<td class='row_{$row}'>{$event->category}</td>
<td class='row_{$row}'>{$event->who}</td>
<td class='row_{$row}'>{$event->location}</td>
</tr>";
$i++;
}
?>
的CSS
這是我的行的CSS代碼。
.tableLine {
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
font-size: 10px;
width: 614px;
border: 0;
padding: 0;
border-spacing: 0;
text-align: left;
}
.tableLine th {
background-color: #990000;
color: #f3f2ea;
font-weight: bold;
}
.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.tableLine tr:hover {
background: #990000;
}
使用CSS:
tr:hover { background: #CCC; }
嘗試這個:
td
刪除class='row_{$row}'
並將其放入tr
標簽 / ** /
.row_0 {
background-color: #424140;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
.row_1 {
background-color: #555352;
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
有了這個:
.row_0 {
background-color: #424140;
}
.row_1 {
background-color: #555352;
}
.row_0:hover, .row_1:hover {
background-color: #EEE; /* highlight row */
}
.tableLine tr td {
padding: 3px 5px 3px 5px;
color: #f3f2ea;
}
嘗試使用CSS
table tr:hover{background:#eee;}
如果您還希望突出顯示每一列,則可以給td每列一個唯一的類,並使用以下內容。 (jQuery的)
$("td").hover(
// Mouse Over Function
function () {
$('.'+$(this).attr('class')).each(function() {
$(this).css("background","#FAFAFA");
});
$(this).parent().children("td").each(function() {$(this).css("background","#FAFAFA")});
$(this).css("background","#FAEEFA");
},
// Mouse Out Function
function () {
$('.'+$(this).attr('class')).each(function() {
$('.'+$(this).attr('class')).css("background","#FFFFFF");
});
$(this).parent().children("td").each(function() {$(this).css("background","#FFFFFF")});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.