jquery rollover , show and hide

Question

I have a small problem with a show and hide jquery. I was hoping someone could explain;

when you roll over image i want the btns to show and stay when you roll on the btns, (its currently flickering)

Also when you roll off the image btns go hide.

here is a demo http://jsfiddle.net/wdWWQ/

Thanks in advance ... Paul

code

/*  PICTURE BTNS SHOW.
    ===================================================================*/
    $(".show-pic-trigger").hover(function () {
        $(".show-btns-pic").show();
    }, function () {
        $(".show-btns-pic").hide();
    })

Answer 1

Move your .show-pic-trigger to the container.

This happens because your button is blocking your anchor tag. It is always good to put the hover class in the container.

Fiddle: http://jsfiddle.net/CzM3X/

Answer 2

Use this code,

/*  PICTURE BTNS SHOW.
===================================================================*/
$(".show-pic-trigger").hover(function (e) {
    $(".show-btns-pic").show();
    e.preventDefault();
}, function () {
    $(".show-btns-pic").hide(e);
    e.preventDefault();
})

JS FIDDLE : http://jsfiddle.net/wdWWQ/1/

You need to use event.preventDefault() function