有没有办法在 ASP.Net 页面中将鼠标悬停在其上时更改 html 元素

Question

临时数据填充 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>