当鼠标离开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

您是否尝试过jQuery（）。hide（）和jQuery（）。show（）

Answer 2

只检查那里是否有图像

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

如果您不想删除图片，只需切换可见性

即可

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

另一种选择是对添加的图像进行删除操作（单击时）。

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