0

考虑单击父 div 时 ID 淡入的图像，简单吧？

我正在使用这种技术来模拟单选按钮。

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

现在的问题是，在 Firefox（可能还有其他浏览器）中，当单击父 div 并且图像淡入时，图像具有被突出显示的外观。

话虽如此，如果我单击屏幕上的其他位置，图像突出显示就会消失。有没有办法解决这个问题而不必点击其他地方？

我尝试像这样使用 .blur() ，希望它可以工作。

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

这是一个视觉示例： http: //www.videsignz.com/images/blur_image.jpg

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

这是我的小提琴观点： http: //www.videsignz.com/images/myfiddleview.jpg

4

2 回答 2

1

您可以尝试将 img 更改为带有背景图像的 div：

html代码：

<div id="parent_div">
  <div id="image_id"></div>
</div>

<style>
  #parent_div {
      border: 1px solid gray;
      min-height: 20px;
    }

  #image_id {
      display:none;
      background-image: url('http://www.myfico.com/Images/sample_overlay.gif');
      width: 382px;
      height: 259px;
  }

</style>
<script type="text/javascript">
  $('#parent_div').on('click', function(){
    $('#image_id').fadeIn(200);
  });
</script>

请参阅（更新的）plunker：http ://plnkr.co/edit/8Hi2OP?p=preview

祝你好运！

更新： div 现在已修复（必须关闭），请参见此处的小提琴：http: //jsfiddle.net/VRfuJ/1/

于 2012-11-01T22:44:51.247 回答
0

我猜这就是你所追求的：

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

小提琴

于 2012-11-01T22:48:03.037 回答