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();
    })

Here's a [Fiddle](http://jsfiddle.net/mdesdev/XSc6h/). – Milan and Friends Sep 19 '13 at 11:49 — Milan and Friends, Sep 19 '13 at 11:49

score 0 · Accepted Answer · answered Sep 19 '13 at 11:24

0

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/

answered Sep 19 '13 at 11:24

JofryHS

5,804
2
32
39

appreciate your help:) – Paul O'Brien Sep 19 '13 at 11:40
When I duplicate this code and hover over an image everything becomes highlighted. can you make it specific to each hover? – Paul O'Brien Sep 19 '13 at 12:04
It depends on how you separate each images. Are they in different `
`? – JofryHS Sep 19 '13 at 12:10
Yes all the same, works the same just needs to display one at a time – Paul O'Brien Sep 19 '13 at 12:12
Check this: http://jsfiddle.net/CzM3X/2/ You can use `$(this).find()` for to isolate each. The placement of your two buttons on each image now depends on your CSS. – JofryHS Sep 19 '13 at 12:16
great, thats perfect ! – Paul O'Brien Sep 19 '13 at 12:22

score 0 · Answer 2 · answered Sep 19 '13 at 11:27

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

jquery rollover , show and hide

2 Answers2