Jquery Instance Selecting

[chasethemetal]

Hey all, I'm trying to change some CSS class attributes on specific instances. Let me show you what I mean. So the code here changes the background color correctly of the container only on the div we are hovering. But I need it to change the txt and edit properties of that instance only too.... Can't figure it out... Any help would be appreciated! thanks. $(document).ready(function(){ $('.pages').mouseover(function() {$(this).css({"background-color": "#333"});$('.txt').css({"color": "#FFF"});$('.edit').css({"visibility": "visible"});}); $('.pages').mouseout(function() {$(this).css({"background-color": "#EEF0F3"});$('.txt').css({"color": "#000"});$('.edit').css({"visibility": "hidden"});}); }); <div class="pages" align="left"><div class="txt">BLOG</div><div class="edit" align="center">EDIT</div></div> <div class="pages" align="left"><div class="txt">CONTACT</div><div class="edit" align="center">EDIT</div></div>

[dsonesuk]

to change class, go to jquery website and search for addclass(), removeclass() , toggleclass(), for content change look for html().

[chasethemetal]

Well changing the class isn't the issue here, I'm successfully changing/altering the classes and removing them. If you look at my html structure you see if have 3 classes. pages, txt and edit. Now when I mouse over .pages, I want it to change only that instance of .pages that instance of .txt and that instance of .edit. Right now it works with changing that instance of .pages because in the mouseover function it targets $(this), but I basically need it to target this.txt and this.edit when the mouse goes over .pages too. Does that make sense? Any other ideas would be appreciated.

[thescientist]

you should be able to use jquery to get the children of this and filter the result sethttp://api.jquery.com/children/http://api.jquery.com/find/

[chasethemetal]

Ok I will look into this, thank you. I wonder though... The thing is there will be a dynamic range of these groups of threes... meaning... <div class="pages"><div class="txt"></div><div class="edit"></div></div> will repeat, a dynamic amount of times like <div class="pages"><div class="txt"></div><div class="edit"></div></div><div class="pages"><div class="txt"></div><div class="edit"></div></div><div class="pages"><div class="txt"></div><div class="edit"></div></div> I wonder if that will change anything? Anyways I'll post back if I find a solution.

[thescientist]

that's the point of using this within the event handler.

[chasethemetal]

Ok got it. Thanks thescientist... simple solution. $('.pages').mouseover(function() {$(this).css({"background-color": "#333"});$(this).children(".txt").css({"color": "#FFF"});$(this).children(".edit").css({"visibility": "visible"});}); $('.pages').mouseout(function() {$(this).css({"background-color": "#EEF0F3"});$(this).children(".txt").css({"color": "#000"});$(this).children(".edit").css({"visibility": "hidden"});});