Question

So I’ve got a pretty stupid question. Is it possible, to create a div on hover? I don’t have access to the file that creates a list for me, so it creates this.

<ul class="class">
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

In this particular project, I can’t edit that file directly. but I’d like to create a on the outside of each list item

   <div>stuff</div><li>content</li>

I know it’s not an IDEAL setup, but it’s the way I’d like to do it. Worse comes to worse, I’ve got another way that WORKS, but I’d like –

something like

jQuery('#target').hover(function() {
    jQuery(this).find('<li>').echoBefore('<div class="class">stuff</div>')
    });

That would be my IDEAL solution to the sticky situation I’ve got 😛

Answer 1

To create the DIVs on the outside of each LI you can use the following code:

jQuery(this).find('li').before('<div class="class">stuff</div>');

However, if it’s all the same, I would recommend creating those DIVs on the inside of the LIs using this code:

jQuery(this).find('li').prepend('<div class="class">stuff</div>');