下拉触发器视觉上“活跃”，如“悬停”[基础6]

Question

请参阅以下代码以获取基本悬停下拉窗格：

<button class="button" type="button" data-toggle="example">Toggle Dropdown</button>

<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true">
    <div class="row">
        <div class="medium-12 columns">
            <p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p>
        </div>
    </div>
</div>

现在我想要发生的是，当用户正在查看该下拉窗格中的任何内容时，触发该事件的按钮会有一个可视指示符，表明它是“活动”触发器。这是一个图片示例：

非常感谢您提供的任何见解。

Answer 1

基金会在这里介绍了你。

当.dropdown-pane（内容包装器）处于活动状态时，按钮将被赋予类.hover（不要与:hover状态混淆）。

因此，您可以简单地向该类添加特定样式（如果您想在不同场景中使用多种不同类型的效果，则相对于您的按钮）。您必须手动确保您的基金会:hover与您的新.hover州匹配。

HTML（例如）

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
  Example form in a dropdown.
  <form>
    <div class="row">
      <div class="medium-6 columns">
        <label>Name
          <input type="text" placeholder="Kirk, James T.">
        </label>
      </div>
      <div class="medium-6 columns">
        <label>Rank
          <input type="text" placeholder="Captain">
        </label>
      </div>
    </div>
  </form>
</div>


<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
  Just some junk that needs to be said. Or not. Your choice.
</div>

<强> CSS

.button.hover,
.button:hover{
  background-color: green;
}

工作示例：https://jsfiddle.net/tymothytym/8re4jcy0/＆lt;＆lt;在这个示例（及以上）中，我手动设置:hover和.hover因为我使用了默认的F6 CSS构建，它具有set :hover状态但是如果你已经设置{ {1}}（例如:hover）您不需要重新设置它。

Answer 2

使用css。找到悬停在按钮上的样式，并创建一个：hover伪类并以这种方式应用样式，或者您可以使用javascript将一个类添加到具有精确css作为悬停在按钮上的元素。

.element：悬停{  在这里添加样式 }

或

var element = document.getElementByClassName（'。className'）;

element.addClass（ 'classToAdd。'）;