我关注了100天的CSS挑战。第62天卡住了。试图用纯css实现进度条。
当在卡片上悬停时，我希望进度条有更大的宽度。
下面的悬停不起作用，我不知道为什么。任何关于如何调试这类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>使用此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);
}