Home/ Questions/Q 6019743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T03:27:56+00:00

I have a simple list and when I rollover the li selector I want

  • 0

I have a simple list and when I rollover the li selector I want to find the original height of the p tag inside that rollover scope that has a class of subtext. I want to store that value somewhere so I can use it on the rollout method. is there a way to store it in the this scope. If I use a global variable it may get changed by another rollover scope before the previous one gets to use it.

I also want to know how I can get the correct height of the selectors text height.
var pheight = $(this, “p.subtext”).height();
the above code is not reading the full height of the text. It seems to be reading the height of the li tag which in the css is set to height:50px;

li{
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
list-style-type: none;

}

HTML CODE 

<body>
<ul>
    <li class="green">
        <div ></div>
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page has more text than any other panel. I want the script to revel different height text.</p>
    </li>
    <li class="yellow">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p><a href="#">Contact</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p><a href="#">Submit</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
    <li class="purple">
        <p><a href="#">Terms</a></p>
        <p class="subtext">Legal stuff</p>
    </li>
</ul>


$("document").ready(function(){

$("li").mouseover(function(){
    var pheight = $(this, "p.subtext").height();
    console.log(pheight);
    $(this).stop().animate({height:150}, {duration: 600, easing: "easeOutExpo"} );
})

$("li").mouseout(function(){
    $(this).stop().animate({height:50}, {duration: 600, easing: "easeOutExpo"} );
})

})

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you need to use the selector the other way round — $('p.subtext', this). More obviously, use find:

    var pheight = $(this).find('p.subtext').height();

    Then you can store the data on the element itself with data:

    $(this).data('pheight', pheight);

    You can retrieve it in the mouseout function with data again:

    $(this).stop().animate({height: $(this).data('pheight')}, {duration: 600, easing: "easeOutExpo"} );
    • 0