[英]highlight search keywords on hover
我有一个基本的php搜索表单,该表单使用CSS突出显示了关键字。 我想知道是否只有当用户将鼠标悬停在记录上时,才能使结果中的关键字突出显示。 这可能吗?
这是重点代码:
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;
}
我尝试通过highlight:hover更改颜色,但这仅在将鼠标悬停在关键字本身上时才更改搜索关键字的颜色,这是可以理解的,因为这是应该起作用的方式,但是我希望搜索关键字能够当我将鼠标悬停在整个结果上时,将突出显示。
尝试使用此CSS。 当您将鼠标悬停在行上时,它将使用“ highlight”类更新任何内容。 只需将此处的样式更新为您想要在悬停效果上看到的样式即可。
table.result tr:hover .highlight {
color: #FFFFFF;
background: #FF0000;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.