javascript - 有没有办法在 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 而不是悬停。
您还需要找到父级的 child ，而不是总类“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>