突出显示悬停时的搜索关键字 [英] highlight search keywords on hover

问题描述

我有一个基本的php搜索表单，该表单使用CSS突出显示了关键字.我想知道是否只有当用户将鼠标悬停在记录上时，才能使结果中的关键字突出显示.这可能吗?

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?

这是重点代码:

    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更改颜色，但这仅在将鼠标悬停在关键字本身上时才更改搜索关键字的颜色，这是可以理解的，因为这是应该的工作方式，但是我希望当我将鼠标悬停在整个结果上时，搜索关键字将突出显示.

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.

推荐答案

尝试使用此CSS.当您将鼠标悬停在行上时，它将使用"highlight"类更新任何内容.只需将此处的样式更新为您想要在悬停效果上看到的样式即可.

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;
}

这篇关于突出显示悬停时的搜索关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！