Question

Consider an image with an ID fading in when the parent div is clicked, simple right?

I am using this technique to simulate radio buttons.

HTML

<div id="parent_div">
    <img id="image_id" style="display:none;" src="/images/some_image.png">
</div>

JQuery

$('#parent_div').on('click', function(){
    $('#image_id').fadeIn(200);
});

Now the problem is, in Firefox (maybe other browsers as well), that when the parent div is clicked, and the image fades in, the image has the appearance of being highlighted.

With that being said, if I click somewhere else on the screen, the image highlight disappears. Is there a way to get around this without having to click elsewhere?

I tried using .blur() like so, hoping it might work.

$('#image_id').fadeIn(200).blur();

Here is a visual example: http://www.videsignz.com/images/blur_image.jpg

JSFiddle: http://www.jsfiddle.net/VRfuJ/

This is my fiddle view: http://www.videsignz.com/images/myfiddleview.jpg

Answer 1

I’m guessing this is what you’re after:

$('img, .radio_btn').on('mousedown', function(e) {
    document.onselectstart = function() { return false; };
    e.target.ondragstart = function() { return false; };
    return false;
});

$('.radio_btn').on('click', function() {
    if (!$('img', this).is(':visible')) {
        $('img', this).fadeIn(200);
        $('.radio_btn').not(this).find('img').fadeOut(200);
    }
});

FIDDLE