jQuery在图像上使用.blur（）

考虑一个ID在单击父div时淡入的图像，很简单，对吗

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

HTML

现在的问题是，在Firefox（可能还有其他浏览器）中，当单击父div时，图像淡入淡出，图像就有高亮显示的外观

话虽如此，如果我点击屏幕上的其他地方，图像高亮显示就会消失。有没有一种不用点击其他地方就能绕过这个问题的方法

我试着像这样使用.blur（），希望它能起作用

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

以下是一个可视示例：

JSFiddle：

---

这是我的小提琴视图：

您可以尝试将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>

#家长组{
边框：1px纯色灰色；
最小高度：20px；
}
#图像识别码{
显示：无；
背景图像：url（'http://www.myfico.com/Images/sample_overlay.gif');
宽度：382px；
高度：259px；
}
$（'#parent_div'）。在（'click'，function（）上{
$（'image_id'）.fadeIn（200）；
});

请参阅（更新的）plunker：

祝你好运

---

更新：div现在已修复（必须关闭），请参见此处的小提琴：

我猜这就是您想要的：

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

---

你能发一封邮件吗？这也许可以用CSS解决…模糊可以用在图像元素上吗？你说的“突出显示”到底是什么意思，你有没有在CSS中尝试过

outline:none

，或者你正在使用一些CSS框架，比如jQuery mobile、bootstrap等？Sushanth，我不确定，我只是希望它会…看看链接Adeneo，它显示了突出显示…就好像你用鼠标在上面拖动文本来复制一样，并提出了另一种可能的解决方案，尽管我不得不说你的小提琴似乎适合我。。。你使用的是哪一版本的Firefox？我已经走了这条路，它确实有效，但如果图像被禁用，我就不能设置alt标记。再次感谢你！当我使用小提琴时，它会在我第一次点击时出现，然后消失。它搞乱了我…alt属性可以替换为div中的title，例如

。至于混乱，你需要关闭div。小提琴现在在这里更新：谢谢你，Adeneo，如果你检查我小提琴视图顶部的链接，这就是我单击单选按钮时看到的，即使使用你的小提琴。这只会在我第一次补充时发生。虽然在我的网页上，每次都会发生。当我点击屏幕上的其他地方时，它就会消失。也许在其他地方有一个.focus（），或者在初始单选按钮选择后有一个模拟的点击？完美兄弟！我认为图像的取消选择只发生在“mousedown”上？至少，这似乎是基于Adeneos代码的工作$（'.radio_btn'）.on（'mousedown'，function（）{return false；}）；是的，mousedown函数将阻止选择器中的元素被选中，这些元素当然都是图像和带有radio_btn类的任何元素，但如果需要，可以使用更具体的选择器缩小范围。最后一次返回false并不总是需要的，它可能会导致一些幻灯片等出现问题。但在这种情况下，似乎返回false正在完成这项工作，它可能会单独工作。其他的是IE等，我总是用这个片段来定制复选框等@adeneo请在Fiddle示例中添加工作链接，谢谢。

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

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