将鼠标悬停在第2类上时，如何更改第一种类的样式，反之亦然？

Question

我想在悬停时更改同级div的CSS样式。但不幸的是我无法做到这一点。

这是我的风格情况。当我将鼠标悬停在 .mapThumb 类元素上时，确实会更改 .link 类的CSS，但是当我将鼠标悬停在 .link 类元素上时，它不会更改 .mapThumb 类元素的css。screen shot is attached here for maPthumb hover screen shot is attached here for link hover

 .grid {
  .mapBox {
    padding: 0 15px;
    .link {
      padding: 5px 0 20px 0;
      white-space: nowrap;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      a {
        color: $body-default-color;
        font-size: 12px;
        line-height: 16px;    
      }
      &:hover { 
        a {
          color: $primary;
          opacity: 1;
        }

        & ~ .mapThumb {
          border: 2px solid $primary !important;
          .fab-link {
            display: block;
          }
        }
      }
      @media screen and (max-width: $break-small) {
        width: 120px;
      }
    }
    .mapThumb {
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
      border: 1px solid $text-muted;
      background-color: $white;
      border-radius: 4px;
      width: 200px;
      height: 200px;
      img {
        object-fit: none;
        border-radius: 4px;
        height: 100%;
        width: 100%;
      }
      .fab-link {
        position: absolute;
        bottom: 10px;
        display: none;
        right: 10px;
        padding: 0;
        opacity: 0.7;
        &:hover {
          opacity: 1;
        }
      }
      &:hover {
        border: 2px solid $primary !important;
        .fab-link {
          display: block;
        }
        & + .link {
          a {
            color: $primary;
            opacity: 1;
          }
        }
      }
    }
  }
}