Bootstrap 扩展按钮悬停状态答案

【问题标题】：Bootstrap extend button hover stateBootstrap 扩展按钮悬停状态
【发布时间】：2021-04-14 06:43:38
【问题描述】：

我正在为我正在构建的网站使用 bootstrap 4。我正在使用引导卡，在这些卡中我有主按钮（btn-primary）。悬停卡片时，我还想触发按钮的悬停状态。有没有办法做到这一点？

Can I force an element to display its hover effect? 我尝试了这个 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 以将 :hover 上的相同规则应用于某个类，然后打开/关闭该类。
这能回答你的问题吗？ How to trigger CSS "hover state" using Javascript?

标签： html css bootstrap-4

【解决方案1】：

最简单的方法是这样的 CSS 表达式。它与标准的 Bootstrap 主题相匹配。您可以使用自己的颜色主题。

.card:hover a { color: #fff;
background-color: #0069d9;
border-color: #0062cc; }

如果您必须实现更复杂的行为，您可以使用 jQuery API (https://api.jquery.com/mouseover/) 将事件发送到按钮 .mouseover() && .mouseout() 或者 .mouseenter() && .mouseleave()

【讨论】：

【解决方案2】：

你不需要@extend。

您可以使用 CSS 更改按钮的属性，而无需与按钮交互。

例如，您有 2 个按钮，您希望在按钮容器悬停时更改 1 个按钮的背景颜色，并在第一个按钮悬停时更改为不同颜色。你可以这样做：

.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>

【讨论】：

感谢您的回答。我知道这是可能的，但我实际上想触发 btn-primary 的悬停状态而不自己为此创建悬停类（如果这甚至可能的话）。
天哪，我想你在js中获取元素然后使用focus()方法触发悬停效果。