Question

我有一个在ascx-Control中有一些行的表。

如何为行添加悬停效果以更改backgroundcolor或font-color，...

谢谢

Answer 1

如果没有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>

Answer 2

您可以使用jQuery。这是Stackoverflow的另一个问题，它向您展示了如何做到这一点。

Add background color and border to table row on hover using 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>

所有工作都在客户端完成。

Answer 3

你也可以通过为下面的行创建一个类

来使用css

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

    .tableRowStyle a:hover
    {
       color: #0000ff;
       /* whatever style you want on hover */
    }

Answer 4

  $("tr").hover(
  function () {
    $(this).css("background","Color" );
  }, 
 function () {
  $(this).css("background","");
  }

）;

在ascx中悬停表

4 个答案: