Keeping an element selected after hover

Question

So here is my code:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#image1:hover {
  filter: brightness(50%);
}

.desc {
  padding: 15px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <h2>Dropdown Image</h2>
  <p>Move the mouse over the image below to open the dropdown content.</p>

  <div class="dropdown">
    <img id="image1" src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
    <div class="dropdown-content">
      <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
      <div class="desc">Beautiful Cinque Terre</div>
    </div>
  </div>

</body>

</html>

As you can see when you run it and hover on the small photo a bigger version of it appears (and the smaller version becomes a little darker). Nonetheless, when you hover away from the smaller version to the bigger one the small photo goes back to normal.

Could someone possibly explain to me how I could keep the smaller photo darker (selected) while the cursor is on the small photo or the big one with CSS?

Thank you very much in advance.

Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Sabyasachi Patra, Aug 04 '18 at 16:27

score 0 · Answer 1 · answered Aug 04 '18 at 16:13

0

Instead of #image1:hover, apply the darkening on .content:hover #image1

answered Aug 04 '18 at 16:13

Jonathan

8,771
4
41
78

score 0 · Accepted Answer · answered Aug 04 '18 at 16:14

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown:hover #image1 {
    filter: brightness(50%);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.desc {
    padding: 15px;
    text-align: center;
}

<div class="dropdown">
  <img id="image1" src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
    <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

Keeping an element selected after hover

2 Answers2