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" <[email protected]> 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: [email protected] [mailto:[email protected]] 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?
