How do I make an entire <div> link darken on hover?-CodePudding

In my website, I have a div with some content in it, which links to another part of the page. The code is shown here with placeholders for the actual content. When the div is clicked, the page does scroll as intended, but I want the entire div to darken on hover, so it is more clear to the user. I am not completely sure how to do this with divs in CSS. How could I do this?

<a href="#testing">
  <div >
    <img src="media\[image]" width="171" height="80">
    <h1>
      [title]
    </h1>
    <h3>
      [item]<br>
      [item]<br>
      [item]
    </h3>
  </div>
</a>

CodePudding user response：

You have a space in the hover selector. This matters because the space is the descendant selector in CSS

div.w3-third :hover{
background-color: #E3E3E3;
}

This means that only hovered descendants of .w3-third are affected by the rules. Remove the space. check the example fiddle

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<style>
#darkOnHover:hover {
  background-color: #383838 ;
}
</style>
</head>
<body>


<a href="#testing">
  <div  id="darkOnHover">
    <img src="media\[image]" width="171" height="80">
    <h1>
      [title]
    </h1>
    <h3>
      [item]<br>
      [item]<br>
      [item]
    </h3>
  </div>
</a>
</body>
</html>

CodePudding user response：

You can use the filter property https://developer.mozilla.org/en-US/docs/Web/CSS/filter

div.w3-third:hover {
  filter:brightness(50%);
}

<!DOCTYPE html>
<html>

<head>
  <style>
    .w3-third {
      background: #216efc;
    }
    
    div.w3-third:hover {
      filter: brightness(50%);
    }
  </style>
</head>

<body>
  <a href="#testing">
    <div >
      <img src="media\[image]" width="171" height="80">
      <h1>
        [title]
      </h1>
      <h3>
        [item]<br> [item]
        <br> [item]
      </h3>
    </div>
  </a>
</body>

</html>

CodePudding user response：

use :visited CSS pseudo-class -> https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

a:visited > div:hover {
  filter:brightness(50%);
}