Question

我有一个用于控制HTML的用户控件，如下所示：

<table id="tblProgramInfo" runat="server" cellpadding="0" cellspacing="0" class="ProgramInfo">
<tr>
    <td>
        <table cellpadding="0" cellspacing="0" width="100%" class="tblProgram" abc="def">
            <tr>
                <td>
                    Some data
                </td>
            </tr>
        </table>
    </td>
</tr>

由于它是用户控件，因此它们可以是具有相同类“ProgramInfo”和“tblProgram”的多个表。现在我使用Jquery为“ProgramInfo”类附加了mouseover和mouseout事件。我想要的是，在mousemove和mouseout上改变包含类“tblProgram”的内部表格的边框颜色。
我的mousemove和mouseevent是：

$(document).ready(function()
{
    $(".ProgramInfo").mouseover(function()
     {
    // Code here?
     });
    $(".ProgramInfo").mouseout(function()
    { 
    // Code here?
    });
});

另外，我想通过JQuery 更改上表的宽度和高度。当我尝试这个时，我得到宽度：自动。

Answer 1

查看jQuery hover（）方法：

http://docs.jquery.com/Events/hover

它为mouseover / -out

提供了更清晰的抽象

Answer 2

$(this).find('.tblProgram').css({ borderColor:"cdd6e8" });

Answer 3

你可以这样做：

$(document).ready(function()
{
    $(".ProgramInfo").mouseover(function()
    {
        $(this).width($('#baseTable').width());
        $(".tblProgram", this).css("border", "solid black 1px");
     });
    $(".ProgramInfo").mouseout(function()
    { 
        $(this).width(100);
        $(".tblProgram", this).css("border", "solid red 1px");
    });
});

Answer 4

虽然其他答案涵盖了动态更改CSS属性，但更改类可能是更好的做法。这样可以避免使用样式污染JS，并帮助您避免在以后更改它们以进行基本设计更新。

$(document).ready(function() {
    $(".ProgramInfo").mouseover(function() {
        $(this).width($('#baseTable').width());
        $(".tblProgram", this).addClass('hover');
    });
    $(".ProgramInfo").mouseout(function() {
        $(this).width(100);
        $(".tblProgram", this).removeClass('hover');
    });
});

（我刚刚修改了Aexander Prokofyev的代码，不确定宽度的东西......）

Answer 5

我想知道它是 gridview 还是数据控件，在这种情况下是完成的最佳方式，如果你想从实际页面中抽象出悬停函数您放置控件的位置（想象一下，对于您使用该控件的所有页面，您需要将该代码放在页面本身中）。

因此，最好的方法是使用DataItem事件（或类似于所有数据控件）

让我们假设您有一个名为myGrid的GridView。

ASP.NET事件

protected void myGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    { 
        // it's a row that contains data, so let's attach the mouse hover effects here to each row
        GridViewRow tr = e.Row;

        // a little of jQuery to add a class when the mouse is over the row, and to remove it once is out of the row
        tr.Attributes.Add("onmouseover", "$(this).addClass('gvSelectedDisabled');");
        tr.Attributes.Add("onmouseout", "$(this).removeClass('gvSelectedDisabled');");
    }
}

<强> HTML

<asp:GridView ID="myGrid" runat="server" 
    onrowdatabound="myGrid_RowDataBound">
</asp:GridView>

<强> P.S。

如果你想要，例如，为其中包含对象数据的项目显示绿色背景，有些标志和其他颜色，请参阅本主题中的答案：

Selectively apply css to a row in a gridview

使用JQuery更改表边框颜色

5 个答案: