recognizing html element in JQuery for CSS class under class.
My HTML code below has nested CSS classes
- <div class="homepage">
- <section class="hp-top">
- <div class="container">
- <div class="userMenu">
- <ul>
- <li><a href="#" class="home"><span></span></a></li>
- <li><a href="#" class="News"><span></span></a></li>
- <li><a href="#" class="about"><span></span></a></li>
- <li><a href="#" class="contactus"><span></span></a></li>
- </ul>
- </div>
- .....
- </div>
My JQuery function below need to use the span property.
- $(function() {
- // set opacity to null on page load
- $("<I want to specify "ul span" here>").css("opacity","0");
- // on mouse over
- $("<I want to specify " ul span" here>").hover(function () {
- // animate opacity to full
- $(this).stop().animate({
- opacity: 1
- }, 'slow');
- },
- // on mouse out
- function () {
- // animate opacity to nill
- $(this).stop().animate({
- opacity: 0
- }, 'slow');
- });
- });
I tried this, with no luck.
- $( ".homepage .hp-top .container .userMenu ul span").css("opacity","0");
Please help me solve this issue.
Thanks in Advance.