我正在为正在构建的网站使用bootstrap 4。我正在使用引导卡，在这些卡中我有主按钮(btn-primary(。当悬停卡片时，我想触发按钮的悬停状态。有办法做到这一点吗？
我可以强制元素显示悬停效果吗？我尝试了这个url的答案，但这不起作用，因为编译器抛出了一个错误，btn-primary:hover复合选择器可能不再扩展。上面写着考虑@extend.btn-primary，：hover。这是有效的，但这使我的css文件变得巨大，因为它扩展了各种悬停，而不是专门针对按钮。
有没有其他方法可以触发引导程序按钮的悬停状态，而不悬停按钮本身？
如果是可能的，我希望完成Scss示例
.card {
&:hover {
.btn {
//Trigger the hover state of btn primary that is in the card here
}
}
}
最简单的方法是这样的CSS表达式。它与标准引导程序主题相匹配。您可以使用自己的颜色主题。
.card:hover a { color: #fff;
background-color: #0069d9;
border-color: #0062cc; }
如果你必须实现更复杂的行为，你可以使用jQuery API(https://api.jquery.com/mouseover/)将事件发送到按钮.mouseover((&。mouseout((或.mousenter((&。鼠标离开((
您不需要@extend。
您可以使用CSS更改按钮的属性，而无需与按钮交互。
例如，您有两个按钮，当按钮的容器悬停时，您想更改一个按钮的背景颜色，而当第一个按钮悬停时，则要更改为不同的颜色。你可以这样做：
.buttons {
position: relative;
text-align: center;
border: 1px solid black;
}
.btn,
.btn2 {
cursor: pointer;
font-size: 20px;
border: 2px solid black;
border-radius: 4px;
padding: 30px;
background-color: red;
transition: all 0.3s ease-in-out;
}
.btn2:hover {
background-color: white;
}
.buttons:hover .btn {
color: white;
background-color: blue;
}
.btn:hover {
color: white!important;
background-color: orange!important
}<body>
<div class="buttons">
<button class="btn">Button #1</button>
<br><br><br>
<button class="btn2">Button #2</button>
</div>
</body>