Таблица наведения в ascx - PullRequest
Новая
       7

Таблица наведения в ascx

0 голосов
/ 10 марта 2012

У меня есть таблица с несколькими строками в ascx-Control.

Как добавить эффект наведения на строку для изменения цвета фона или шрифта, ...

спасибо

Ответы [ 4 ]

4 голосов
/ 10 марта 2012

Без 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>
2 голосов
/ 10 марта 2012

вы также можете сделать это только с css, создав класс для строки, как показано ниже 

    .tableRowStyle 
     {
        color: #fff;
        /* whatever style you want*/
     }

    .tableRowStyle a:hover
    {
       color: #0000ff;
       /* whatever style you want on hover */
    }
2 голосов
/ 10 марта 2012

Вы можете использовать jQuery .Вот еще один вопрос в Stackoverflow, который показывает вам, как это сделать.

Добавление цвета фона и границы для строки таблицы при наведении курсора с помощью 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>

Вся работа выполняется на стороне клиента.

1 голос
/ 10 марта 2012 
  $("tr").hover(
  function () {
    $(this).css("background","Color" );
  }, 
 function () {
  $(this).css("background","");
  }

);

...