Удалить изображение, когда мышь покидает div

Question

У меня есть коробка 3X3, и в настоящее время у меня она есть, так что, когда вы наводите курсор на любой квадрат, фон становится синим, а затем, когда вы наводите курсор, возвращается обратно в пустую. У меня также есть это, чтобы при нажатии любого из ящиков появляется изображение. То, что я пытаюсь сделать сейчас, - сделать так, чтобы при щелчке по ящику изображение появлялось, и когда этот же ящик снова щелкнут, изображение исчезнет и так далее, используя JQuery.

Вот что у меня есть:.

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

Answer 1

Просто проверьте, если есть. image there уже

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

Если вы не хотите удалить изображение, вы просто переключаете visibi 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>"); 

} 

Answer 2

Вы пробовали JQuery() скрыть() и JQuery() шоу()

Answer 3

Другой вариант - использовать атрибут CSS :hover.

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

Относительно щелчком мыши вы можете добавить изображения к вашим div с и использовать JQuery переключаясь.

HTML:

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

JavaScript:

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

Answer 4

Попробуйте следующий код в вас нажмите функция

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

Другой вариант сделать удалить вывода, n добавленное изображение (при нажатии).

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