Working with JQuery to change CSS properties

Question

I am using the Jquery UI tabs, and want to change the properties of an element on mouseover.

My HTML is this:

<ul id="sub-tabs"> <li><a href="#000"><span>000<br /><p id="ct1">General</p></span></a></li> </ul>...

And jquery is:

$('#guide-nav ul#sub-tabs span').mouseover(function() {
   $("#guide-nav ul#sub-tabs li p").css("display", "none"); 
});

But this is not working.

Answer 1

<ul id="sub-tabs">
    <li><a href="#000"><span>000<br /><p id="ct1">General</p></span></a></li>
</ul>

Jquery is:

$('#guide-nav ul#sub-tabs span').mouseover(function() {
   $("#guide-nav ul#sub-tabs li a span p").css("display", "none"); 
});

Or try this:

$('#guide-nav ul#sub-tabs span').mouseover(function() {
   $("p#ct1").css("display", "none"); 
});

Or this:

$('#guide-nav ul#sub-tabs span').mouseover(function() {
   $(this).find('p').css("display", "none"); 
});

Answer 2

Use this

$('#guide-nav ul#sub-tabs span').mouseover(function() {
   $("#guide-nav ul#sub-tabs li p").css({display:"none"}); 
});

Answer 3

Okay, i wrapped this in a function and it works...

$(function() {                                             
    $('#guide-nav ul#sub-tabs li a span').mouseover(function() {
        $(this).find('p').css("display", "none"); 
    });
});

I decided to use the above statement to only hide the elements within the selected tab, because there will be multiples

Answer 4

When I try your code it actually works. Are you sure that the DOM has finished loading when you are executing the javascript?

$(document).ready(function() {
  $('#guide-nav ul#sub-tabs span').mouseover(function() {
    ("#guide-nav ul#sub-tabs li p").css("display", "none");
  });
});

Instead of .css("display", "none"); you can also use .hide()