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>

(更新された) プランカーを参照してください: 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 に答える