Question

在单击父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

Answer 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/

Answer 2

我猜这就是你所追求的：

$('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

jQuery在Image上使用.blur（）

2 个答案: