仅更改除悬停图像以外的所有图像的不透明度

基础概念

在网页设计中，不透明度（Opacity）是指元素的不透明程度，取值范围为0到1，其中0表示完全透明，1表示完全不透明。通过调整不透明度，可以实现元素的半透明效果。

类型

固定不透明度：设置一个固定的不透明度值。
动态不透明度：根据用户的交互或页面状态动态调整不透明度。

应用场景

背景图像：使背景图像半透明，以突出页面内容。
按钮和图标：通过调整按钮和图标的不透明度，增强交互效果。
图片叠加：在多张图片叠加时，通过调整不透明度实现不同的视觉效果。

代码示例

以下是一个使用CSS和JavaScript实现仅更改除悬停图像以外的所有图像不透明度的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Opacity Control</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <img src="image1.jpg" class="image" alt="Image 1">
    <img src="image2.jpg" class="image" alt="Image 2">
    <img src="image3.jpg" class="image" alt="Image 3">
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.image {
    opacity: 0.5; /* 默认不透明度 */
    transition: opacity 0.5s ease; /* 平滑过渡效果 */
}

.image:hover {
    opacity: 1; /* 悬停时的不透明度 */
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.image');
    images.forEach(image => {
        if (!image.matches(':hover')) {
            image.style.opacity = '0.5'; // 设置除悬停图像以外的所有图像的不透明度
        }
    });
});