Таблица наведения в ascx
У меня есть таблица с несколькими строками в ascx-Control.
Как добавить эффект наведения на строку для изменения цвета фона или шрифта,...
благодарю вас
4 ответа
Решение
Без JavaScript/jQuery вы можете использовать чистый CSS...
<head>
<title></title>
<style>
.changecolor:hover
{
background-color: Blue;
color: Red;
}
</style>
</head>
<body>
<table>
<tr class="changecolor">
<td>
Hello
</td>
</tr>
</table>
</body>
Вы также можете сделать это только с помощью CSS, создав класс для строки, как показано ниже
.tableRowStyle
{
color: #fff;
/* whatever style you want*/
}
.tableRowStyle a:hover
{
color: #0000ff;
/* whatever style you want on hover */
}
Вы можете использовать jQuery. Вот еще один вопрос в Stackru, который показывает вам, как это сделать.
Добавить цвет фона и границы для строки таблицы при наведении курсора с помощью jquery
Но здесь я привожу полный пример. Все, что вам нужно, это настроить его для отображения в пользовательском элементе управления ASP.NET.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(function () {
$('tr').hover(function () {
$(this).css('background-color', '#33CCFF');
},
function () {
$(this).css('background-color', '#FFFFFF');
});
});
</script>
<table border="1">
<tr>
<td>
Hello world
</td>
</tr>
<tr>
<td>
Goodbye world
</td>
</tr>
</table>
</body>
</html>
Вся работа выполняется на стороне клиента.
$("tr").hover(
function () {
$(this).css("background","Color" );
},
function () {
$(this).css("background","");
}
);