2010-05-28 5 views
1

나는 CSS를 사용하여 키워드를 강조 표시하는 기본 PHP 검색 양식을 가지고 있습니다. 사용자가 레코드 위로 마우스를 가져갈 때만 결과 강조 표시의 키워드를 만들 수 있는지 궁금합니다. 이것이 가능한가? 강조 표시 검색 키워드

가 하이라이트 코드 :

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

: 가져가 있지만, 검색 키워드의 색상을 변경에만 나는 이상 공중 선회 할 때 그 자체가 그것이 작동하기로되어있는 방식으로 이해할 수있는 키워드 자체이지만, 전체적으로 결과 위에 마우스를 올리면 검색 키워드를 강조하고 싶습니다.

답변

1

이 CSS를 사용해보세요. 행 위에 마우스를 올리면 "강조 표시"클래스가있는 모든 항목이 업데이트됩니다. 호버 효과에 표시 할 스타일로 여기에서 스타일을 업데이트하면됩니다.

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

답장을 보내 주셔서 감사합니다. 키워드의 형식을 변경하는 대신 마우스 오버시 전체 행의 형식이 변경됩니다. – input

+0

행 아래 강조 표시가있는 클래스에만 영향을 주어야합니다. 내가 게시 한 것과 같은 방식으로 포맷 하시겠습니까? –

+0

난 그냥 테스트 페이지에서 이것을 시도하고 그것을 원하는 방식으로 작동해야합니다. 여전히 작동하지 않는 CSS와 테이블의 출처를 게시 할 수 있습니까? 덕분에 –