Changing another DIVs css property on hover not working

Question

I am having an issue where I cannot get another div to change a css property on hover.

My HTML structure is as follows:

<section class="grid panel-small">
  <div class="col-6 grid-container">
    <div class="col-12 item">
        <a href="#" class="item-area gold">
           <div class="full-row" style="
               background-image: url(https://www.painterartist.com/static/ptr/product_content/painter/2018/bob-ross/gallery/03.jpg)">
           </div>
           <div class="item-description">
                 <div class="item-description-inner">
                     <h2>Title</h2>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus sed sem eget efficitur.</p>
                     <div class="feature-btn">
                         View more
                            <i class="fas fa-angle-right"></i>
                      </div>
                </div>
           </div>
        </a>
     </div>
  </div>
 </section>

I want to be able to change item-description-inner to have a positive margin rather than a negative one.

Here is my CSS:

  main#container .grid, main#container .grid .grid-container {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row wrap;
     flex-flow: row wrap;
  }

   main#container .grid .grid-container .item {
      -webkit-flex: 1 auto;
      flex: 1 auto;
      position: relative;
      overflow: hidden;
   }

    main#container .grid .grid-container .item > .item-area {
         position: relative;
         width: 100%;
         display: block;
         z-index: 1
      }

    main#container .grid .grid-container .item > .item-area > .full-row {
            padding-bottom: 56.222%;
         }

    main#container .grid .grid-container .item > .item-area > .half-row {
        padding-bottom: 112%;
        padding-bottom: calc( 2 * 56.222%);
     }

     main#container .grid .grid-container .item > .item-area .item-description {
        padding-right: 55px;
        padding-bottom: 33px;
        padding-left: 55px;
        position: relative;
        z-index: 2;
     }

        main#container .grid .grid-container .item > .item-area .item-description > .item-description-inner {
           margin-top: -31px;
           margin-bottom: 31px;
        }

.item > .item-area:hover .item-description > .item-description-inner {
    margin-top: 31px;
}

I read this S.O article, and read about ~ and + but none of these selectors are working for me.

add more specifity, make it the same as the above one and add the hover — Temani Afif, Dec 20 '17 at 13:27
Can you try `.item > .item-area:hover .item-description > .item-description-inner`? Might be that the browser decides that the first rule is more specific than the hover rule. So even though the rule is applied, the normal rule overrides it. — Malte Hartwig, Dec 20 '17 at 13:27
above comments are right. If you want more details you can read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Logar, Dec 20 '17 at 13:30
maybe there is more CSS that we need to see ... maybe the `a` has a height = 0 for some reason — Temani Afif, Dec 20 '17 at 13:38
it's working fine for me ... just create a snippet and tested — Temani Afif, Dec 20 '17 at 13:46
@TemaniAfif It doesn't for me https://jsfiddle.net/mucjnajg/1/ — cmp, Dec 20 '17 at 13:51
as we said specificity issue :) add this `.grid .grid-container` to the last selector ... you need to make it similar to the other one + the hover — Temani Afif, Dec 20 '17 at 13:54
@TemaniAfif many thanks indeed! P.s. Answer the question :-) — cmp, Dec 20 '17 at 13:58

score 1 · Accepted Answer · answered Dec 20 '17 at 14:03

You are facing a specificity issue as the intial selector is more specific than the one with the hover

This one is more specific:

 main#container .grid .grid-container .item > .item-area .item-description > .item-description-inner

Than this one:

.item > .item-area:hover .item-description > .item-description-inner

To fix the issue you can add more specifity to the second one and make it like this :

main#container .grid .grid-container .item > .item-area:hover .item-description > .item-description-inner

You can also make the first one less specific

score -1 · Answer 2 · answered Dec 20 '17 at 13:33

-1

try this:

.item-description-inner {
                margin-top: -31px;
                margin-bottom: 31px;
}

.item-description-inner:hover {
                 margin-top: 31px;
}

answered Dec 20 '17 at 13:33

yinkouya

83
1
11

Changing another DIVs css property on hover not working

2 Answers2