How to hover div by hovering a different div?

July 20, 2022

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>

>Solution :

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>