Динамическое изменение ячейки таблицы

Question

Я работаю над проектом, который требует отображения набора изображений продуктов и ссылок в таблицах, и хотел бы реализовать динамическое изменение ячейки таблицы при наведении мыши, как они делают в «Найти» http://www.thefind.com.

Когда вы выполняете поиск и наводите курсор мыши на любую ячейку таблицы на странице результатов, граница ячейки изменяется на поднятый трехмерный тип границы.

Мне интересно, как реализоватьэтот эффект?

Answer 1

Есть несколько способов сделать это, взгляните на некоторые из них:

* ** 1003 тысяча два *http://css -tricks.com / строки и столбцы-подсветка /

Чистый CSS: http://www.designisphilosophy.com/microsoft-expression-web/fancy-interactive-pure-css-list-boxes-with-hover-effect/

Answer 2

jQuery был бы моим способом пойти на это.

Вы могли бы дать класс к вашему столу, как <td class="niceBorder"></td>

Затем, либо во внешнем файле .js, либо в тегах скрипта в разделе заголовка страницы, вы можете просто сделать что-то вроде следующего:

$(".niceBorder").hover(function(){
     $(this).css("border", "2px outset silver");
})

Не забудьте включить библиотеку jQuery на своей странице перед файлом .js или тегами сценария в разделе head.