highlight search keywords on hover
i've a basic php search form which highlights the keywords using css. i was wondering if i could make the keywords in the results highlight only when the user hovers over the record. is this possible?
this is the highlight code:
function highlightWords($text, $words) {
preg_match_all('~\w+~', $words, $m);
if(!$m)
return $text;
$re = '~\\b(' . implode('|', $m[0]) . ')~i';
$string = preg_replace($re, '<span class="highlight">$0</span>', $text);
return $string;
}
. . .
<table class="result">
<?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
$cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
?>
<tr>
<td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
<td style="font-size:16px;"><?php echo $cQuote; ?></td>
<td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
<td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
</tr>
<?php } ?>
</table>
css:
table.result tr:hover {
background:#F7F7F7;
}
.highlight {
font-weight:bold;
color: #DE2842;
padding:5px;
padding-right:2px;
background: #FFFCDB;
}
i tried changing the color through highlight:hover, but this changed the color of the search keyword only when i hovered over the keyword itself, which is understandable since that's the way it is supposed to work, but i'd like the search keywords t开发者_运维知识库o be highlighted when i hover over the result as a whole.
Try using this CSS. It will update anything with the "highlight" class when you hover over the row. Just update the styles here to what you want to see on the hover effect.
table.result tr:hover .highlight {
color: #FFFFFF;
background: #FF0000;
}
精彩评论