有没有办法在 ASP.Net 页面中悬停时更改 html 元素

Question

tempdata 在 aspx 页面中填充一个 div。 每当父 div - SomeClassParent 被悬停时，应该显示子跨度文本 - SomeClassChild3 字符串。 我如何使用 jQuery 实现这一目标？

下面是代码的js部分

function ShowDiv(Somedata){
 for(var v in Somedata){
    var tempdata = ''
    tempdata += '<div class="SomeClassParent">'
    tempdata += '<div class="SomeClassChild">'+Somedata[v].serialnum+'</div>'
    tempdata += '<span class="SomeClassChild2">'+Somedata[v].textdata.slice(0,49).trim()+'</span>'
    tempdata += '<span class="SomeClassChild3" style="display:none;">'+Somedata[v].textdata.slice(49,v.textdata.length).trim()+'</span>'
    tempdata += '</div>'
}
}


$(document).ready(function () {
    $('.SomeClassParent').hover(function () {
        $(".SomeClassChild3").css({"display":"block"});
    });
    });

Answer 1

我假设您希望它们在不悬停在它们上方时折叠起来。 因此，您需要使用 mouseenter 和 mouseleave 而不是悬停。

您还需要找到父级的孩子，而不是总类“SomeClassChild3”或当您将鼠标悬停在具有“SomeClassParent”类的任何内容上时将显示该类的所有元素

 $(document).ready(function () { $('.SomeClassParent').mouseenter(function () { $(this).find(".SomeClassChild3").css({"display":"block"}); }); $('.SomeClassParent').mouseleave(function () { $(this).find(".SomeClassChild3").css({"display":"none"}); }); });

 .SomeClassParent{ width: 30%; float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="SomeClassParent"> <div class="SomeClassChild">Child</div> <span class="SomeClassChild2">Child2</span> <span class="SomeClassChild3" style="display:none;">Child3</span> </div> <div class="SomeClassParent"> <div class="SomeClassChild">Child</div> <span class="SomeClassChild2">Child2</span> <span class="SomeClassChild3" style="display:none;">Child3</span> </div> <div class="SomeClassParent"> <div class="SomeClassChild">Child</div> <span class="SomeClassChild2">Child2</span> <span class="SomeClassChild3" style="display:none;">Child3</span> </div>