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">000 General</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.

bradenkeith · Accepted Answer · 2010-08-31 12:22:38Z

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

answered Aug 31, 2010 at 12:22

bradenkeith

2,4131 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Media Shark Over a year ago

This did not seem to work either. I was thinking that maybe the Jquery UI Tabs may be rewriting the styles and/or names of the elements, so I removed the call, and still no go.

Yi Jiang · Accepted Answer · 2010-08-31 12:27:13Z

0

Use this

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

edited Aug 31, 2010 at 12:27

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

answered Aug 31, 2010 at 12:22

yogs

7882 gold badges13 silver badges29 bronze badges

2 Comments

bradenkeith Over a year ago

That is just another way to write .css("display","none") and would not change anything about how his code reacts.

Media Shark Over a year ago

Still no go. I may try in a independentenvironment, to see if some other code on the page is messing with it...

djdd87 · Accepted Answer · 2010-08-31 12:52:52Z

0

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

edited Aug 31, 2010 at 12:52

djdd87

68.6k29 gold badges159 silver badges198 bronze badges

answered Aug 31, 2010 at 12:50

Media Shark

212 bronze badges

Comments

sewa · Accepted Answer · 2010-08-31 13:05:23Z

0

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()

answered Aug 31, 2010 at 13:05

sewa

1,9421 gold badge13 silver badges8 bronze badges

Collectives™ on Stack Overflow

Working with JQuery to change CSS properties

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related