有没有一种方法可以将HTML元素悬停在ASP.Net页面中

问题描述

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"});
    });
    });

解决方法

我假设您希望它们在 not 悬停在它们上方时折叠。因此，与悬停相比，您需要使用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>