“悬停” 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

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

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