выделить ключевые слова поиска при наведении - PullRequest
Новая
       14

выделить ключевые слова поиска при наведении

1 голос
/ 28 мая 2010

У меня есть основная форма поиска 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;
}

я пытался изменить цвет с помощью выделения: hover, но это изменилоцвет поискового ключевого слова только тогда, когда я нацелился на само ключевое слово, что понятно, поскольку именно так оно и должно работать, но я бы хотел, чтобы поисковые ключевые слова выделялись, когда я наводил курсор на результат в целом.

1 Ответ

1 голос
/ 28 мая 2010

Попробуйте использовать этот CSS. Он будет обновлять что-либо с помощью класса «highlight», когда вы наводите курсор на строку. Просто обновите стили до того, что вы хотите увидеть в эффекте наведения. 

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