CSS sibiling选择器无法正常工作

Question

我无法创建一些悬停效果。我有卡片布局。每当您将一张卡片悬停时，该卡片应该展开并将其他卡片移动到其下方或上方。我可以使用“lg marketing”卡，但是使用完全相同的语法进行“侧面”或“侧面写作”的某些原因不起作用。

.lg {
  width: 49%;
  height: 70vh;
  -webkit-transition: width .25s, height .25s, -webkit-transform 2s;
  /* Safari */
  transition: width .25s, height .25s, transform 2s;
  transition-timing-function: linear;
}
.lg:hover {
  width: 100%;
  height: 90%;
  float: none;
}
.lg:hover ~.writing {
  clear: both;
  float: left;
  margin-top: 2vh;
}
.side {
  width: 49%;
  height: 34vh;
  -webkit-transition: width .25s, height .25s;
  /* Safari */
  transition: width .25s, height .25s;
  transition-timing-function: linear;
}
.side:hover {
  width: 100%;
  height: 90%;
}
.side:hover ~.marketing {
  width: 49%;
  height: 34vh;
}

<div id="cards">
  <!-- Marketing Tile -->
  <div class="card lg marketing">
    <h1>Marketing Skills</h1>
    <div class="marketingSkills">
      <div class="digital">
        <p>Digital Advertising</p>
      </div>
      <div class="socManage">
        <p>Social Media Advertising</p>
      </div>
      <div class="research">
        <p>Marketing Research</p>
      </div>
      <div class="seo">
        <p>SEO</p>
      </div>
      <div class="Sales">
        <p>Sales</p>
      </div>
      <div class="Excel">
        <p>Excel</p>
      </div>
      <div class="Analytics">
        <p>Google Analytics</p>
      </div>
      <div class="Event">
        <p>Event Planning</p>
      </div>
    </div>
  </div>

  <!-- Writing Tile -->
  <div class="card side writing">
    <h1>Writing Skills</h1>
    <div class="writingSkills">
      <div class="blog">
        <p>Blogging</p>
      </div>
      <div class="copywriting">
        <p>Copywriting</p>
      </div>
      <div class="narrative">
        <p>Narrative Writing</p>
      </div>
    </div>
  </div>

  <!-- Entrepreneurship -->
  <div class="card side business">
    <h1>Business Skills</h1>
    <div class="businessSkills">
      <div class="customer">
        <p>Customer Service</p>
      </div>
      <div class="stratMan">
        <p>Strategic Managment</p>
      </div>
      <div class="contract">
        <p>Contract Negotiations</p>
      </div>
    </div>
  </div>

  <!-- Web Design -->
  <div class="card md design">
    <h1>Web Development Skills</h1>
    <div class="designSkills">
      <div class="html">
        <p>HTML/CSS</p>
      </div>
      <div class="rails">
        <p>Ruby on Rails</p>
      </div>
      <div class="git">
        <p>Git</p>
      </div>
      <div class="wp">
        <p>WordPress</p>
      </div>
      <div class="heroku">
        <p>Heroku</p>
      </div>
    </div>
  </div>

  <!-- Game Design Tile -->
  <div class="card md games">
    <h1>Game Development Skills</h1>
    <div class="devSkills">
      <div class="unity">
        <p>Unity</p>
      </div>
      <div class="cSharp">
        <p>C#</p>
      </div>
      <div class="genDesign">
        <p>Game Design</p>
      </div>
      <div class="procGen">
        <p>Procedural Generation</p>
      </div>
      <div class="cpp">
        <p>C++</p>
      </div>
    </div>

  </div>
</div>