“悬停”CSS 选择器中的代码停止工作

Question

我正在尝试在我的页面中创建一个小的交互式图片库，除了这个问题之外的一切都正常工作：当我将鼠标悬停在图像上时，它们会按预期改变不透明度和大小，但是，在我单击其中一个并将其放大后，当我再次尝试将鼠标悬停在它们上方时没有任何反应。

这就是我的意思：

当前的 CSS：

#houseImages img {
    opacity: 0.7;
    margin: 1em;
    transition: 0.3s;
    width: 18em;
    height: 15em;
    border-radius: 3em;
    border-style: solid;
    border-width: 0.05em;
}

#houseImages img:hover {
    transform: scale(1.1);
    opacity: 1.0;
    cursor: pointer;
}

单击图像时正在使用的当前脚本：

"use strict";

function defaultSettings(imgElement)
{
    imgElement.style.position = "initial";
    imgElement.style.transform = "scale(1.0)";
    imgElement.style.opacity = "0.7";
}

function clickedSettings(imgElement)
{
    imgElement.style.position = "absolute";
    imgElement.style.transform = "scale(2.6)";
    imgElement.style.left = "40%";
    imgElement.style.top = "30%";
    imgElement.style.opacity = "1.0";
    imgElement.style.zIndex = "99";
}

function imageClicked(imgID)
{
    let img = document.getElementById("img" + imgID);
    let otherImages = document.querySelectorAll("#houseImages img:not(#img" + imgID + ")");
    let div = document.getElementById("houseImages");
    let previousCloseImageButton = document.querySelector("#houseImages button");

    // if another image was already clicked there's some cleanup to do
    if(previousCloseImageButton)
        previousCloseImageButton.remove();

    otherImages.forEach(image => defaultSettings(image));

    clickedSettings(img);

    let closeImageButton = document.createElement('button');
    closeImageButton.setAttribute("id","close");
    closeImageButton.setAttribute("onclick","notClicked(" + imgID + ")");
    closeImageButton.innerHTML = 'X';
    div.append(closeImageButton);
}

function notClicked(imgID)
{
    let img = document.getElementById("img" + imgID);
    let closeImageButton = document.querySelector("#houseImages button");

    defaultSettings(img);

    closeImageButton.remove();

}

Answer 1

当您调用defaultSettings(img);该notClicked(imgID)函数时，您将直接在 HTML img 对象上设置样式属性，就好像您是用<img style="opacity: 0.7">HTML编写的一样。在对象上设置的样式总是比样式表产生的样式具有更高的优先级。实际上，为 定义的规则#houseImages img:hover不会影响您的图像。您需要做的是取消设置本地样式属性，让样式表再次工作：

function defaultSettings(imgElement)
{
    imgElement.style.position = "";
    imgElement.style.transform = "";
    imgElement.style.opacity = "";
}