highlight search keywords on hover
- by fusion
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 to be highlighted when i hover over the result as a whole.
