mettre en surbrillance les mots-clés de recherche sur hover

Question

J'ai un formulaire de recherche php de base qui met en évidence les mots-clés en utilisant CSS. Je me demandais si je pouvais faire ressortir les mots-clés dans les résultats uniquement lorsque l'utilisateur survole l'enregistrement. Est-ce possible?

c'est le code de surbrillance:

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 essayé de changer la couleur par point fort: vol stationnaire, mais cela a changé la couleur du mot-clé de recherche seulement quand je planait sur le mot clé lui-même, ce qui est compréhensible puisque c'est la façon dont il est censé fonctionner, mais je voudrais que les mots-clés de recherche soient mis en évidence lorsque je survole le résultat dans son ensemble.

Answer 1

Essayez d'utiliser ce CSS. Il mettra à jour n'importe quoi avec la classe "highlight" lorsque vous passez la souris sur la ligne. Juste mettre à jour les styles ici à ce que vous voulez voir sur l'effet hover.

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