:hover seems to not work and i have no idea why

Question

I don't know why, but hover won't change the opacity of the image. I've even tried to make a separate HTML page and it has the same problem.

<!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>

Inline `style=“”` attributes always override rules in ` – Dai May 28 '20 at 16:51 — Dai, May 28 '20 at 16:51
Thank you a lot that fixes a lot of my problems – Ianis Donica May 28 '20 at 16:52 — Ianis Donica, May 28 '20 at 16:52

score 3 · Accepted Answer · answered May 28 '20 at 16:51

See specificity in the specification.

A rule in a style attribute will always override a rule with a selector (unless you use !important which is almost always more trouble then it is worth).

Replace your style attributes with, for example, classes and put the rules in your stylesheet with suitable (i.e. lower or equal to #div24 img:hover) specificity.

score 2 · Answer 2 · answered May 28 '20 at 16:55

you are giving inline css, and the priority is more of that compared to on page style block

you should do it in this way

<!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>

score 0 · Answer 3 · answered May 28 '20 at 17:05

0

instead of putting inline css first style each image through internal css then try it. it should work

answered May 28 '20 at 17:05

Bipin parajuli

27
2

score -1 · Answer 4 · answered May 28 '20 at 16:55

As is mentioned your inline style is overriding any attempt to affect opacity:

Here is a better way to do it:

<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/

:hover seems to not work and i have no idea why

4 Answers4