在注册jquery的mouseover和mouseout以后，总是会发生闪的情况

Question

  $(document).ready(function () {            InitEvents();        });        function InitEvents() {            bindDatalist("DivMyComitee", "DivDataListComitee", "<%=DataListMyComitee.ClientID %>");  
        
        }        function addCssForGroupDesc() {
            $("#<%=DataListGroup.ClientID %> tr").each(function (i) {                var desc = $(this).find("span").html();
                if (desc == 'MY GROUPS' || desc == 'MY DIVISIONS' || desc == 'MY BRANCHES') {                    $(this).removeClass("mywork_sub_menu_td_highlighted");
                    $(this).addClass("mywork_sub_menu_item_section");                }
            });        }        function bindDatalist(divId, divDataListId, DataListId) {            var DivControl = $("#" + divId);
            var DivDataList = $("#" + divDataListId);            DivControl.live('mouseover', function () {
                DivDataList.show();
            });            DivControl.live('mouseout', function () {                DivDataList.hide();
            });            DivDataList.live('mouseover', function () {                DivDataList.show();
            });            DivDataList.live('mouseout', function () {                DivDataList.hide();
            });            DivDataList.hide();                $(function () {                    $("#" + DataListId + " tr").mouseover(function () {
                        $(this).removeClass("mywork_sub_menu_item");
                        $(this).addClass("mywork_sub_menu_td_highlighted");
                        //$(this).css("background", "#EEEEEE");                    });
                    $("#" + DataListId + " tr").mouseout(function () {
                        $(this).removeClass("mywork_sub_menu_td_highlighted");
                        $(this).addClass("mywork_sub_menu_item");
                        //$(this).css("background", "white");
                    });                })
        }    </script> <div class="main_menu_td">
                            <div id="DivMyComitee">
                                <asp:ImageButton runat="server" ID="IMGBtnMyComittee" ImageUrl="/_layouts/images/MOHOCP/main_menu_MyCommittee_U.png"
                                    CssClass="imageBtn" onmouseover="this.src='/_layouts/images/MOHOCP/main_menu_MyCommittee_S.png'"
                                    onmouseout="this.src='/_layouts/images/MOHOCP/main_menu_MyCommittee_U.png'" />
                            </div>
                            <div id="DivDataListComitee" class="mywork_sub_menu_datalist">
                                <asp:DataList ID="DataListMyComitee" runat="server" Width="100%" border="0" CellPadding="0"
                                    CellSpacing="0" OnItemDataBound="DivDataListComitee_OnItemDataBound">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="LinkMyComitee" runat="server" Text='<%# Bind("USER_NAME") %>'
                                            class="sub_menu_link"></asp:LinkButton>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        <asp:LinkButton ID="LinkViewAll" runat="server" Text='View All' class="sub_menu_link"></asp:LinkButton>
                                    </FooterTemplate>
                                    <ItemStyle CssClass="mywork_sub_menu_item" />
                                    <FooterStyle CssClass="mywork_sub_menu_footer" />
                                </asp:DataList>
                            </div>
                        </div>css：
.mywork_sub_menu_td_highlighted
{
    background: #EEEEEE;
   
}.mywork_sub_menu_item
{
    height: 24px;
    font-size: 11px;
    padding: 0px 10px;
    border-bottom-width: 1px;
    border-bottom-color: #9E9AFF;
    border-bottom-style: solid;
}在我切换这两个css的时候，show出来的datalist总是会闪，搞不明白是为什么。
还请高人指点！

Answer 1

.mywork_sub_menu_td_highlighted
{position:relative;
  background: #EEEEEE;
    
}.mywork_sub_menu_item
{position:relative;
  height: 24px;
  font-size: 11px;
  padding: 0px 10px;
  border-bottom-width: 1px;
  border-bottom-color: #9E9AFF;
  border-bottom-style: solid;
}
试试

Answer 2

2楼的，不行啊，还是一样在闪，但是如果我把onmouseout事件不写东西却是可以的

Answer 3

肯定是冒泡了，解决方法：
1.找到冒泡的节点，使用jq取消冒泡
2.把onmouseout，onmouseover改用hover

Answer 4

楼上的
我已经修改成hover了
代码如下：  $("#" + DataListId + " tr td").hover(            function () {
                $(this).toggleClass("mywork_sub_menu_td_highlighted");            },
            function () {
                $(this).toggleClass("mywork_sub_menu_td_highlighted");            });效果还是一样啊。。
冒泡是啥意思啊

Answer 5

冒泡就是JavaScript 的事件冒泡
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这
一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。 

Answer 6

你可以找到冒泡的DOM节点，并且在该节点上绑定阻止冒泡事件的发生
$("冒泡的节点").click(function(event){  
    event.stopPropagation();
}) 

Answer 7

谢谢大家
我在最外面套的一层div里面改成了hover就可以了