：悬停似乎不起作用，我不知道为什么[重复]答案

【问题标题】：:hover seems to not work and i have no idea why [duplicate]：悬停似乎不起作用，我不知道为什么[重复]
【发布时间】：2020-09-16 02:11:10
【问题描述】：

我不知道为什么，但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>

【问题讨论】：

内联style=“” 属性始终覆盖<style> 元素中的规则。
非常感谢您解决了我的很多问题

标签： html css

【解决方案1】：

不要将内联 css 首先通过内部 css 设置每个图像的样式，然后尝试它。它应该工作

【讨论】：

【解决方案2】：

您提供的是内联 css，与页面样式块相比，优先级更高

你应该这样做

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#div24 img {
  opacity: 0.2;
}
#div24 img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>
<div id="div24">
  <h3>OPACITY 0.2</h3>
  <img src="img01.jpg" alt="1">
  <h3>OPACITY 0.5</h3>
  <img src="img01.jpg" alt="2">
  <h3>OPACITY 1</h3>
  <img src="img01.jpg" alt="1">
</div>
</body>
</html>

【讨论】：

【解决方案3】：

如前所述，您的内联样式覆盖了任何影响不透明度的尝试：

这是一个更好的方法：

<h3>OPACITY 0.2</h3>
<img class="changeme" src="https://i.ytimg.com/vi/Ep3jK1bZrB8/maxresdefault.jpg" alt="1">

.changeme {
  opacity: 0.2;
}
.changeme:hover {
  opacity: 1;
}

https://jsfiddle.net/7mo8ygxn/

【讨论】：

【解决方案4】：

请参阅规范中的specificity。

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

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

【讨论】：