即使点击页面上的空白区域，如何保持按钮“悬停”？

Question

我有一组使用锚标记充当“选项卡”的按钮。选项卡的功能运行顺利，按钮保持悬停状态，直到我单击另一个按钮。但是，在我单击按钮外部后，所有按钮都不再悬停。我怎样才能防止这种情况发生？ 任何建议将不胜感激。谢谢！

$(document).ready(function(){
  $('.tab-content').hide();
  $('.tab-content:first').show();
  $('.tabs-nav .wp-block-button__link').click(function() {
    let currentTab = $(this).attr('href');
    $('.tab-content').hide();
    $(currentTab).fadeIn();

    return false;
  });
});

.wp-block-button.custom-tab-button .wp-block-button__link:hover,
.wp-block-button.custom-tab-button .wp-block-button__link:active,
.wp-block-button.custom-tab-button .wp-block-button__link:focus {
    background: #CBB07A !important;
    border-color: transparent !important;
    background-color: brown !important;
    color: white !important;
}

.wp-block-button.custom-tab-button .wp-block-button__link:active {
  background-color: #FFF; // Reset background color to default
  color: #000; // Reset color to default
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我知道焦点样式在某些情况下有效，但这不是解决方案。

Answer 1

你不能那样做。但是，您可以在单击按钮时向按钮添加一个类，并以与悬停样式相同的方式设置类的样式。

Answer 2

当鼠标光标（指针）“悬停”在元素上时，会发生

:hover

。当元素当前获得焦点时，会出现

:focus

。一旦您点击其他地方，您就会将焦点转移到其他地方。所以现在这两个条件都不适用。

听起来你想要模拟的条件是“我点击的最后一个”。一种方法是在单击元素时设置一个类，并根据需要设置该类的样式。例如：

$('.tabs-nav .wp-block-button__link').click(function() {
  $('.tabs-nav .wp-block-button__link').removeClass('currentButton');
  $(this).addClass('currentButton');

  // the rest of your click handler...
});

只需为该

currentButton

类添加样式即可：

.wp-block-button.custom-tab-button .wp-block-button__link:hover,
.wp-block-button.custom-tab-button .wp-block-button__link:active,
.wp-block-button.custom-tab-button .wp-block-button__link:focus,
.currentButton {
    background: #CBB07A !important;
    border-color: transparent !important;
    background-color: brown !important;
    color: white !important;
}