Hi everyone, this is my first message to the jquery group, hope you
don't mind and i'll improve over time :)

My HTML is this:

<ul id="gallery">
<li>
<h2><a href="#targeturl">www.targetlink.com.whatnot</a> Title</h2>
<img src="thumb.jpg" alt="" />
<p>Lorem impsum
</p>
</li>


First i'd like to find the IMG tag from every #gallery LI to apply a
hover function to the image inside the specifil ul that has been
hovered.

I tried different versions, and thought this one would be ok, but not
working....

$("#gallery li").hover(
        function(){
                $(this,"img").addClass("over")
        }
}


Secondly i'd like the heading H2 inside the LI to change when i hover
it, i got it partly working, it changes when i hover, but i'd like it
to return to it's original state after that. The code i use ise here:
$("#gallery li h2 a").hover(
        function(){
            $(this).replaceWith("<a href=#the_same_link_as_it_was_before>I am
the changed text</a>");
        },
        function () {
           $(this).replaceWith(this).text;
        }
)


and the last one i'm just puzzled with. I'd like to dynamically add a
DIV element to the inside of an UL, just before ending the ul tag (</
UL>) on mousover, which is quite easy, but i'd like to remove it on
mouseout...

My current code (which does nothing) goes like this:

        $("#gallery li").hover(
                function(){
                        $(this).wrap('<span style="border:1px solid 
green;float:left;"></
span>')
                        .parent()
                        .append('<div id="divver"></div>')
                },
                function () {
                        $(this).css('borderColor','red')
                        /*just for testing*/
                }
        )

Thanks everyone for any guiding me in the right direction, I'm eager
to learn more about jquery every day!
Cheers,
V.

Reply via email to