Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/42.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Php 悬停时突出显示搜索关键字_Php_Css_Search_Highlight - Fatal编程技术网

Php 悬停时突出显示搜索关键字

Php 悬停时突出显示搜索关键字,php,css,search,highlight,Php,Css,Search,Highlight,我有一个基本的php搜索表单,它使用css突出显示关键字。我想知道是否只有当用户将鼠标悬停在记录上时,才能突出显示结果中的关键字。这可能吗 这是突出显示代码: function highlightWords($text, $words) { preg_match_all('~\w+~', $words, $m); if(!$m) return $text; $re = '~\\b(' . implode('|', $

我有一个基本的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>

我尝试通过highlight:hover更改颜色,但这只在我将鼠标悬停在关键字本身上时更改了搜索关键字的颜色,这是可以理解的,因为这是它应该工作的方式,但我希望搜索关键字在我将鼠标悬停在整个结果上时高亮显示

尝试使用此CSS。当您将鼠标悬停在行上时,它将使用“highlight”类更新任何内容。只需将此处的样式更新为您希望在悬停效果上看到的样式

table.result tr:hover .highlight {
    color: #FFFFFF;
    background: #FF0000;
}

尝试使用这个CSS。当您将鼠标悬停在行上时,它将使用“highlight”类更新任何内容。只需将此处的样式更新为您希望在悬停效果上看到的样式

table.result tr:hover .highlight {
    color: #FFFFFF;
    background: #FF0000;
}

谢谢你的回复。这将更改悬停时整行的格式,而不仅仅是更改关键字的格式。它只会影响行下方有高亮显示的类。你确定你的格式和我发布的一样吗?我刚刚在一个测试页面上试用过,它应该按照你想要的方式工作。如果CSS和表格的输出源仍然不起作用,你能发布它吗?谢谢你的回复。这将更改悬停时整行的格式,而不仅仅是更改关键字的格式。它只会影响行下方有高亮显示的类。你确定你的格式和我发布的一样吗?我刚刚在一个测试页面上试用过,它应该按照你想要的方式工作。如果CSS和表格的输出源仍然不起作用,您可以发布它吗?