Yes, I am sure they are the correct class and are showing up properly. Button press: //loop $("#files").append('<div class="file">'+Files[i]+'</div>'); //end loop
Firebug: <div id="files" style="display: block;"> <div class="file">work.txt</div> <div class="file">SAS Guide.txt</div> </div> On Dec 16, 7:43 pm, "Smith, Allex" <allex.sm...@chelanpud.org> wrote: > The browser should render all the styles no matter when they enter. > > Are you sure that the class is assigned to those elements? I would make sure > by peeking at the rendered html via Firebug. > > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > Behalf Of Jason Kaczmarsky > Sent: Wednesday, December 16, 2009 2:14 PM > To: jQuery (English) > Subject: [jQuery] Styling dynamic content > > So I've created a little app which loads some filenames into a div via > an AJAX query. This happens when a user clicks a button, not when the > page loads. Because of this, I cannot style the filenames how I want. > I've tried using CSS to do the trick: > > .file{ > color: #F00; > } > > .file:hover{ > cursor:pointer; > color:#000; > } > > This CSS colors the filenames red when it loads, but nothing in the > hover event works. > > Instead of this, I tried using jQuery to style it. > > $(".file").hover(function(){ > $(this).css("background-color","#F00"); > },function(){ > $(this).css("background-color","#000"); > }); > > This also does not change anything. I assume it is because the element > does not exist when the page is rendered, but later on. Although this > doesn't explain why the text is red when I use the CSS, so I'm a bit > confused. How would I accomplish this?