HTML CSS – 鼠标悬停时变暗（未知颜色）

在本文中，我们将介绍如何使用HTML和CSS使元素在鼠标悬停时变暗，而不需要事先知道元素的颜色。

阅读更多：HTML 教程

实现思路

要实现鼠标悬停时元素变暗的效果，我们可以借助CSS的filter属性和伪类选择器:hover。filter属性可以通过改变元素的亮度、对比度和饱和度等参数，来实现元素变暗的效果。而伪类选择器:hover可以捕捉用户鼠标悬停在元素上的事件，从而触发变暗的效果。

但是在这个话题中，我们并不知道元素的颜色是什么，因此我们不能直接在CSS中写死颜色值。我们需要通过JavaScript来实时获取元素的颜色，并将其传递给CSS，从而实现变暗的效果。

实现代码

下面是一个示例代码，展示了如何使用HTML、CSS和JavaScript来实现鼠标悬停时元素变暗的效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        .darken-on-hover {
            filter: brightness(100%);
            transition: filter 0.3s;
        }
        .darken-on-hover:hover {
            filter: brightness(70%);
        }
    </style>
</head>
<body>
    <div class="darken-on-hover" id="my-element">鼠标悬停时变暗的元素</div>

    <script>
        var element = document.getElementById("my-element");
        var computedStyle = getComputedStyle(element);
        var color = computedStyle.getPropertyValue("color");
        element.addEventListener("mouseover", function() {
            element.style.setProperty("filter", "brightness(70%)");
        });
        element.addEventListener("mouseout", function() {
            element.style.setProperty("filter", "brightness(100%)");
        });
    </script>
</body>
</html>

在上面的代码中，我们定义了一个名为darken-on-hover的CSS类，用于表示需要在鼠标悬停时变暗的元素。该类具有两个定义，其中filter: brightness(100%);表示元素在默认状态下的亮度为100%，而transition: filter 0.3s;表示元素在变暗过程中的动画过渡时间为0.3秒。

然后，我们在HTML中创建一个带有darken-on-hover类的div元素，并为其指定一个id，以便在JavaScript中获取。

接下来的JavaScript代码用于获取元素的当前颜色，并将其保存在一个变量中。然后，我们为该元素添加两个事件监听器，分别在鼠标悬停和离开时改变元素的滤镜效果。当鼠标悬停时，我们将元素的滤镜效果设置为brightness(70%)，即变暗的效果；当鼠标离开时，我们将滤镜效果恢复为默认状态。