如何在情感中实现悬停的效果?

Question

假设我有一个css文件:

.a-hover {
background-color: red;
}
.a-hover:hover {
background-color: blue;
}

.b.a-hover {
background-color: yellow;
}
.b.a-hover:hover {
background-color: green;
}

我如何在情感上做到这一点?

我知道我能做到:

css`
&:hover {
background-color: red;
}
`,

但是在我的例子中悬停有不同的效果取决于它是否为

• 行悬停
• 单个项目悬停
• 没有悬停

如何实现?

Answer 1

像这样?

.outer{
background:#6D8B74 !important;
}
.inner{
background:#7D1E6A !important;
}
.outer:hover .inner{
background:#97C4B8 !important;
}
.outer .inner:hover{
background:#79DAE8 !important;
}
div{
transition:all .5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">
<div class="row">
<div class="card card-body p-5 outer">
<div class="card card-body inner p-5">

</div>
</div>
</div>
</div>