Question

我有一个函数创建一个div网格，当文档加载时（或当用户重置它时）生成并发送到容器div。当一个人盘旋在div上时，他们突出显示（改变颜色）。当用户单击突出显示的div时，它将变为黑色。出于某种原因，当我将鼠标悬停在不同的div上时，黑色的div会恢复为原始颜色。我很困惑为什么会这样。任何帮助或指导将不胜感激。这是我的jsfiddle示例：https://jsfiddle.net/psyonix/1g9p59bx/79/

var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() / numSquares);
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);
    }

    $('.square')
        .height(squareSize)
        .width(squareSize)
        .hover(

    function () {
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }, function () {
        $(this).css({
            'background-color': '#C8C8C8'
        });
    })
        .click(

    function () {
        $(this).css({
            'background-color': '#000000'
        });
    });
}

function resetGrid() {
    $(".square").remove();

}

$(document).ready(function () {
    createGrid(8);

    $("#button").click(function () {
        var numSquares = prompt("Please enter the size");
        resetGrid(numSquares);
        createGrid(numSquares);
    });

});

Answer 1

出于某种原因，当我将鼠标悬停在不同的div上时，黑色的div会恢复为原始颜色

不完全。当你离开当前div时，它会恢复为原始颜色，因为这是你在$('.square').hover的第二个参数中告诉它的内容。您需要记住点击方块，并在“unhover”函数中构建额外的逻辑。

幸运的是，有一种更简单的方法：使用CSS。请注意CSS定义的最底层。

var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() / numSquares);
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);
    }

    $('.square')
        .height(squareSize)
        .width(squareSize)
        .click(function () {
            $(this).addClass('clicked');
        });
}

function resetGrid() {
    $(".square").remove();

}

$(document).ready(function () {
    createGrid(8);

    $("#button").click(function () {
        var numSquares = prompt("Please enter the size");
        resetGrid(numSquares);
        createGrid(numSquares);
    });

});

.container {
    background-color: #252525;
    width: 600px;
    height: 700px;
    margin: 0 auto;
    border-radius: 5px;
}
.inner {
    background-color: #C8C8C8;
    position: absolute;
    width: 580px;
    height: 600px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 5px;
}
.knob {
    background-color: #575759;
    width: 60px;
    height: 60px;
    border-radius: 60px;
}
#left_b {
    position: absolute;
    margin-left: 30px;
    margin-top: 625px;
    margin-bottom: 10px;
}
#button {
    position: absolute;
    margin-left: 265px;
    margin-top: 640px;
    margin-bottom: 10px;
}
#right_b {
    position: absolute;
    margin-left: 510px;
    margin-top: 625px;
    margin-bottom: 10px;
}
#g_area {
    background-color: #C8C8C8;
    position: relative;
    width: 580px;
    height: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    border-radius: 5px;
    overflow: hidden;
}
.square {
    display: inline-block;
    position: relative;
    margin: 0 auto;
}
.highlight {
    background-color: #FFFFFF;
    outline: #C8C8C8;
    outline: 1px;
    outline: solid;
    margin: 0 auto;
}
.square {
    background-color: #C8C8C8;
}
.square:hover {
    background-color: #FFFFFF;
}
.square.clicked {
    background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="outer">
            <div class="inner">
                <div id="g_area"></div>
            </div>
            <div class="knob" id="left_b"></div>
            <div id="button">
                <button>RESET</button>
            </div>
            <div class="knob" id="right_b"></div>
        </div>
    </div>
</body>

Answer 2

点击DIV后，您应该保留一个标志，告诉您悬停功能停止更改颜色

$('.square')
    .height(squareSize)
    .width(squareSize)
    .hover(

function () {
    if ($(this).data("clicked")) return; //ADDED LINE
    $(this).css({
        'background-color': '#FFFFFF'
    });
}, function () {
    if ($(this).data("clicked")) return; //ADDED LINE
    $(this).css({
        'background-color': '#C8C8C8'
    });
})
    .click(

function () {
    $(this).data("clicked", true); //ADDED LINE
    $(this).css({
        'background-color': '#000000'
    });
});

Answer 3

由于悬停功能而改变了。

https://jsfiddle.net/1g9p59bx/82/

$('.square')
        .height(squareSize)
        .width(squareSize)
        .hover(

    function () {
       if($(this).hasClass('active'))return;
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }, function () {
        if($(this).hasClass('active'))return;
        $(this).css({
            'background-color': '#C8C8C8'
        });
    })
        .click(

    function () {
        $(this).addClass('active');
        $(this).css({
            'background-color': '#000000'
        });
    });

div不保留click（）上的CSS属性

3 个答案: