时间戳

首页 > 解决方案 > :hover 似乎不起作用，我不知道为什么

html - :hover 似乎不起作用，我不知道为什么

问题描述

我不知道为什么，但hover不会改变图像的不透明度。我什至尝试制作一个单独的 HTML 页面，但它也有同样的问题。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #div24 img:hover {
      opacity: 1.0;
    }
  </style>
</head>

<body>
  <div id="div24">
    <h3>OPACITY 0.2</h3>
    <img src="https://via.placeholder.com/300x300" alt="1" style="opacity: 0.2;">
    <h3>OPACITY 0.5</h3>
    <img src="https://via.placeholder.com/300x300" alt="2" style="opacity: 0.5;">
    <h3>OPACITY 1</h3>
    <img src="https://via.placeholder.com/300x300" alt="1" style="opacity: 1.0;">
  </div>
</body>

</html>

标签： htmlcss

解决方案

请参阅规范中的特异性。

样式属性中的规则将始终使用选择器覆盖规则（除非您使用!important它几乎总是比它更麻烦）。

例如，将您的样式属性替换为类，并将规则以适当的（即低于或等于#div24 img:hover）特异性放入样式表中。

推荐阅读