纯 CSS 的进度条实现，hover 的问题

Question

我关注了 100 天的 CSS 挑战。 第62天卡住了。 尝试用纯 css 实现进度条。

当悬停在卡片上时，我希望进度条具有更大的宽度。

hover 下面不起作用，我不知道为什么。 有关如何调试此类 css 问题的任何提示也会有所帮助。

使用 JS 会更容易，但我想要纯 CSS 解决方案。 谢谢........

.basic:hover ~ .stats .users-bar .users-progress {
  transform: scaleX(0.7); 
  width: 5%;
}

 .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); overflow: hidden; background: #E9EDEF; color: #333; font-family: 'Open Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; align-items: center; justify-content: space-between; flex-direction: column; }.cards { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 35px 25px 0 25px; box-sizing: border-box; }.card { height: 160px; width: 109px; background-color: white; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); cursor: pointer; transition: 0.5s; }.top { display: flex; align-items: center; justify-content: center; font-weight: 600; width: 100%; height: 40px; background-color: #7DD0ED; color: white; font-size: 0.95rem; transition: 0.5s; }.middle { width: 100%; height: 110px; }.price { font-weight: 700; color: #5E5E5E; font-size: 1.9rem; margin: 5px 0 0 0; transition: 0.5s; }.card p { margin: -6px 0 0 0; font-size: 0.75rem; color: #333; }.lines { margin: 15px 0 0 0; width: 100%; height: 33px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } /* This hover does not work */.basic:hover ~.stats.users-bar.users-progress { transform: scaleX(0.7); width: 5%; }.card:hover { transform: scale(1.1); color: rgb(39, 166, 210); }.card:hover.top { background-color: rgb(39, 155, 210); }.card:hover.price { color: rgb(39, 166, 210); }.stats { width: 375px; background-color: white; height: 155px; margin: 0 0 18px 0; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-around; box-sizing: border-box; padding: 0 15px 0 15px; }.info { width: 100%; display: flex; align-items: center; justify-content: space-between; }.info p { font-size: 0.75rem; font-weight: 400; color: #333; margin-bottom: -10px; }.bar { width: 100%; height: 10px; background-color: #E9EDEF; margin: -6px 0 0 0; border-radius: 5px; overflow: hidden; }.progress { background-color: #7DD0ED; height: 100%; width: 0; transition: 0.5s; }.projects-bar { margin-bottom: 10px; }.as-console-wrapper { height: 300px;important; }

 <div class="frame"> <div class="cards"> <div class="card basic" id="basic"> <div class="top">Basic</div> <div class="price">$5</div> <p>per month</p> <div class="lines"> <span style="height: 3px; width: 75px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 60px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 70px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 50px; background-color: #E4E4E4;"></span> </div> </div> <div class="card pro"> <div class="top">Pro</div> <div class="price">$10</div> <p>per month</p> <div class="lines"> <span style="height: 3px; width: 75px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 60px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 70px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 50px; background-color: #E4E4E4;"></span> </div> </div> <div class="card premium"> <div class="top">Premium</div> <div class="price">$20</div> <p>per month</p> <div class="lines"> <span style="height: 3px; width: 75px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 60px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 70px; background-color: #E4E4E4;"></span> <span style="height: 3px; width: 50px; background-color: #E4E4E4;"></span> </div> </div> </div> <div class="stats"> <div class="info"> <p>5 Users</p> <p>100 Users</p> </div> <div class="users-bar bar"> <div class="users-progress progress" id="users-progress"></div> </div> <div class="info"> <p>20 GB</p> <p>200 GB</p> </div> <div class="gb-bar bar"> <div class="gb-progress progress"></div> </div> <div class="info"> <p>1 Project</p> <p>50 Projects</p> </div> <div class="projects-bar bar"> <div class="projects-progress progress"></div> </div> </div> </div>

Answer 1

改用这个 css 并相应地更改您的 html

   .basic:hover ~ .stats .users-bar {
      transform: scaleX(0.7);
    }

    .pro:hover ~ .stats .gb-bar {
      transform: scaleX(0.7);
    }

    .premium:hover ~ .stats .projects-bar {
      transform: scaleX(0.7);
    }