Dropdown Trigger Visually "Active" Like "Hover" [Foundation 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>

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

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

Answer 1

使用css。找到悬停按钮的样式，然后制作一个 :hover pseudo class 并以这种方式应用样式，或者您可以使用 javascript 将 class 添加到将具有准确 css 作为悬停按钮。

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

或

var element=document.getElementByClassName('.className');

element.addClass('.classToAdd');

Answer 2

Foundation 在这里为您介绍。

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

因此您可以简单地向 class 添加特定样式（如果您想要在不同场景中使用多种不同类型的效果，则相对于您的按钮）。您必须手动确保您的基金会 :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/ << 在这个示例中（及以上）我手动设置 :hover 和 .hover 因为我使用了默认的 F6 CSS 构建具有设置 :hover 状态，但如果您已经设置了 :hover（例如设置为 green），则不需要重新设置它。

Dropdown Trigger Visually "Active" Like "Hover" [Foundation 6]

Dropdown Trigger Visually "Active" Like "Hover" [Foundation 6]

zurb-foundation

zurb-foundation-6