當鼠標離開div時刪除圖像

我有一個3X3盒子，目前我擁有它，這樣當您將鼠標懸停在任何一個方塊上時，背景變成藍色，然後當您將鼠標懸停在外時，盒子將恢復爲空。我也有它，這樣當任何一個方框被點擊時，一個圖像就會出現。我現在想要完成的是這樣做，當單擊框時，圖像將出現，當同一個框再次單擊時，圖像將消失，等等使用Jquery。當鼠標離開div時刪除圖像

以下是我有：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 

     $(function() { 
      $('.divs').hover(function() { 
       $(this).css("background-color", "#0000EE"); 
       console.log('hover'); 

      }, function() { 
       $(this).css("background-color", ""); 
       console.log('hoverout'); 
      }); 

      $('.divs').click(function() { 
       $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>"); 
       console.log('divclicked'); 
      }); 
     });

what my page currently looks like

來源

2012-05-10 Chris Levine

那麼你有什麼嘗試？ – TJHeuvel

只是檢查，如果有一個。已經有圖像

var $img = $("img", this); 
if ($img.length > 0) 
    $img.remove(); 
else 
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

如果你不想刪除圖像，你只需切換可視化lity

var $img = $("img", this); 
if ($img.length > 0) { 
    $img.toggle(); 
} else { 
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>"); 

}

來源

2012-05-10 12:46:35 peirix

正是我在找什麼，謝謝！ –

您是否嘗試過的jQuery（）隱藏（）和jQuery（）顯示（）

來源

2012-05-10 12:42:58 ilanco

或者.toggle（），這樣你就不必跟蹤哪些顯示，哪些不顯示。 – Onheiron

另一種選擇是使用CSS :hover屬性。

.divs:hover { 
    background-color: #0000ee; 
}

關於點擊，你可以添加圖像到你的div s和使用jQuery切換。

HTML：

<div class="divs"><img src="..." alt=""></div>

的JavaScript：

$('.divs').click(function() { 
    $(this).children("img").toggle(); 
});

來源

2012-05-10 12:47:37 VisioN

這對我來說是一種學習體驗，所以這就是爲什麼我沒有在這種情況下使用CSS，但它會容易得多。 +1 –

嘗試下面的代碼在你點擊功能

if($('img.divimg').length == 0){ 
    $('img.divimg').fadeOut(function(){ 
    $(this).remove() 
    }); 
}else{ 
    $(this).prepend("<img class='divimg' style='display:none;' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>").fadeIn(); 
}

另一種方法是使刪除操作Ø添加的圖像（點擊時）。

var img = $('<img>') 
      .attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png') 
      .addClass('divimg') 
      .css('display', 'none') 
      .bind('click', function(){ 
       $(this).remove(); 
      }); 
$(this).prepend(img);

來源

2012-05-10 13:01:25

.bind將會在jquery 1.7+中生效 –

當鼠標離開div時刪除圖像

回答

相關問題