悬停时更改另一个DIV CSS属性不起作用

Question

我遇到一个问题，即我无法再获得另一个div来更改悬停时的CSS属性。

我的HTML结构如下：

<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>

我希望能够将item-description-inner更改为具有正的边距，而不是负的边距。

这是我的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;
}

我读了这篇SO文章，并阅读了~和+但是这些选择器都不适合我。

Answer 1

您面临一个特殊性问题，因为初始选择器比带有悬停项的选择器更具体

---

这个更具体：

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

比这一个：

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

要解决此问题，您可以在第二个问题中添加更多的特殊性，如下所示：

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

您还可以使第一个不那么具体

Answer 2

尝试这个：

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

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