How to hover div by hovering a different div?

Question

I have a div that contains an image of a product. Below it I have the title of the product which is a link. I know how to hover directly on the product title, but I want it to change color when hovering on the image.

Sorry to trivial question, but I'm new and trying to learn. I also found some references, but here I want to deepen the discussion and understand what is the best practice.

.downloads-box {
   display: flex;
   flex-direction: column;
}

.cover_image {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.linkable-box {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.cover_image .product_image {
   opacity: 1;
   transition: 0.2s all;
   margin-bottom: 6px;
}

.cover_image .product_image:hover {
   opacity: 0.85;
}

.product_image > img {
   box-shadow: rgb(0 0 0 / 15%) 0px 10px 10px -10px;
   border-radius: 6px;
}

/*Product Title*/
.prod_title {
   color: #21262F;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 500px;
   transition: all 0.2s;
}

 <div class="downloads-box">
          <a class="linkable-box" href="#"> 
            <div class="cover_image">
              <span class="product_image"><img src="https://www.commonwealthfund.org/sites/default/files/styles/countries_hero_desktop/public/country_image_Japan.jpg?h=fcdfd899&itok=bPWz69YA" alt="Paris" style="width:150px"></span>
              <span class="prod_title t2" title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

why warp the image inside a span? that makes no sense. would be easy to solve if you wouldn't do that. — tacoshy, Jul 20 '22 at 17:10
Actually the html code contains some php elements, I just changed to ask the question here and make everything easier. — GorillaDev, Jul 20 '22 at 17:21

score 1 · Answer 1 · answered Jul 20 '22 at 17:11

Simply add this:

.product_image:hover + .prod_title  {
   color: red;
}

If you want to learn more, there is an entire dedicated post here Using only CSS, show div on hover over another element

.downloads-box {
   display: flex;
   flex-direction: column;
}

.cover_image {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.linkable-box {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.cover_image .product_image {
   opacity: 1;
   transition: 0.2s all;
   margin-bottom: 6px;
}

.cover_image .product_image:hover {
   opacity: 0.85;
}

.product_image > img {
   box-shadow: rgb(0 0 0 / 15%) 0px 10px 10px -10px;
   border-radius: 6px;
}

/*Product Title*/
.prod_title {
   color: #21262F;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 500px;
   transition: all 0.2s;
}


.product_image:hover + .prod_title  {
   color: red;
}

<div class="downloads-box">
          <a class="linkable-box" href="#"> 
            <div class="cover_image">
              <span class="product_image"><img src="https://www.commonwealthfund.org/sites/default/files/styles/countries_hero_desktop/public/country_image_Japan.jpg?h=fcdfd899&itok=bPWz69YA" alt="Paris" style="width:150px"></span>
              <span class="prod_title t2" title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

note, that the color does not only change when you hover over the image. It changes already when you hover the container. — tacoshy, Jul 20 '22 at 17:14

score 0 · Accepted Answer · answered Jul 20 '22 at 17:13

SImple remove the span that is wrapping the image and use the + selector to select the following span:

/* Solution #1 */
.cover_image img:hover + span {
  color: red;
}


/* original CSS */
.downloads-box {
   display: flex;
   flex-direction: column;
}

.cover_image {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.linkable-box {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.cover_image .product_image {
   opacity: 1;
   transition: 0.2s all;
   margin-bottom: 6px;
}

.cover_image .product_image:hover {
   opacity: 0.85;
}

.product_image > img {
   box-shadow: rgb(0 0 0 / 15%) 0px 10px 10px -10px;
   border-radius: 6px;
}

/*Product Title*/
.prod_title {
   color: #21262F;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 500px;
   transition: all 0.2s;
}

<div class="downloads-box">
          <a class="linkable-box" href="#"> 
            <div class="cover_image">
              <img src="https://www.commonwealthfund.org/sites/default/files/styles/countries_hero_desktop/public/country_image_Japan.jpg?h=fcdfd899&itok=bPWz69YA" alt="Paris" style="width:150px">
              <span class="prod_title t2" title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

score 0 · Answer 3 · answered Jul 20 '22 at 17:39

It's quite a simple, but kind of tricky solution. Because both elements with product_image and prod_title classes are in the same div with the class of cover_image, they are called sibling elements.

.cover_image > .product_image:hover + .prod_title {
      color: green; 
 }

The + after the product_image:hover indicates that the element after that is his sibling.

How to hover div by hovering a different div?

3 Answers3