How to hover div by hovering a different div?-CodePudding

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 >
          <a  href="#"> 
            <div >
              <span ><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  title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

CodePudding user response：

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 >
          <a  href="#"> 
            <div >
              <span ><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  title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

CodePudding user response：

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 >
          <a  href="#"> 
            <div >
              <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  title="title-example">My prooduct Title</span>
            </div> 
          </a>
 </div>

CodePudding user response：

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.