CSS悬停与点击状态下颜色切换异常问题

Hey there! Let's break down what's causing those stubborn border problems and fix them up properly.

The Root Causes #

1. ID Mismatch Bug: Your generatealtartiles function creates divs with IDs like at1, but your buildaltar function tries to select elements with IDs like a1—this is why you see errors when clicking tiles in the code snippet!
2. Inline Style Specificity: When you set borderColor: #fff directly on a tile, inline styles override all CSS classes. This locks the border to white, making it impossible to revert back to red with CSS rules (including hover states).
3. Overly Broad Container Class: The red class on the container doesn't fix the inline style issue, and it unnecessary resets all tile borders.

The Fixed Solution #

Updated CSS

We'll use a dedicated class for selected tiles instead of inline styles, and keep hover states working as expected:

#altartiles {
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: 34px 34px 34px;
    grid-template-rows: 63px 63px;
    grid-gap: 8px 6px;
}
#altartiles > div {
    background-color: #000;
    border: 2px dashed red;
    transition: border-color 0.2s; /* Smooth color transition */
}
#altartiles > div:hover {
    border-color: #fff;
}
/* Selected tile state - prioritized properly */
#altartiles > div.selected {
    border-color: #fff;
}

Updated JavaScript

We'll fix the ID mismatch, track the currently selected tile, and use class toggles instead of inline styles:

var $ = function (id) { return document.getElementById(id); };
let selectedTile = null; // Track which tile is currently selected

function generatealtartiles() {
    for (let i = 1; i < 7; i++) {
        var div = document.createElement('div');
        div.id = "a" + i; // Match the ID format used in buildaltar
        div.addEventListener("click", function () { buildaltar(i) });
        $("altartiles").appendChild(div);
    }
}

function buildaltar(tilenumber) {
    var tileId = "a" + tilenumber;
    const currentTile = $(tileId);
    
    // Deselect if clicking the already selected tile
    if (selectedTile === currentTile) {
        selectedTile.classList.remove('selected');
        selectedTile = null;
        return;
    }
    
    // Remove selected class from previous tile if exists
    if (selectedTile) {
        selectedTile.classList.remove('selected');
    }
    
    // Mark current tile as selected
    currentTile.classList.add('selected');
    selectedTile = currentTile;
}

Updated HTML (no changes needed, just confirming)

<body onload="generatealtartiles()">
    <div id="altartiles"></div>
</body>

What This Fixes #

• No More Errors: The ID mismatch is resolved, so clicking tiles won't throw missing element errors.
• Toggleable States: Click a tile to turn its border white, click it again or another tile to revert back to red.
• Working Hover: Hover states will always work, even after tiles have been selected and deselected, since we're no longer using inline styles that override CSS.
• Smooth Transitions: Added a subtle transition for a more polished user experience.

内容的提问来源于stack exchange，提问作者Jack Chandelier