Is there a way to change html element on hovering on it in ASP.Net page

Question

The tempdata populates a div in the aspx page. Whenever the parent div - SomeClassParent is being hovered on, the child span text - SomeClassChild3 string should be shown. How do I achieve that with jQuery?

Below is the js portion of the code

function ShowDiv(Somedata){
 for(var v in Somedata){
    var tempdata = ''
    tempdata += ''
    tempdata += ''+Somedata[v].serialnum+''
    tempdata += ''+Somedata[v].textdata.slice(0,49).trim()+''
    tempdata += ''+Somedata[v].textdata.slice(49,v.textdata.length).trim()+''
    tempdata += ''
}
}


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

user_10633285 · Answer

I assume you want these to collapse when not hovering over them. So, you'll need to use mouseenter and mouseleave versus just hover.

You'll also want to find the parent's children, not the blanket class "SomeClassChild3" or all elements with that class will display when you hover over anything with the class "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;
}



  Child
  Child2
  Child3



  Child
  Child2
  Child3



  Child
  Child2
  Child3

Is there a way to change html element on hovering on it in ASP.Net page

1 Answers