Zurb foundation 下拉式触发器“视觉化”；主动的；例如；悬停“；[基金会6]

有关基本悬停下拉窗格，请参见以下代码：

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

切换下拉列表
当我将鼠标悬停在此下拉窗格中的任何内容上时，如何使上述按钮显示为“活动”，即与将鼠标悬停在按钮上的状态相同

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

---

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

使用css。找到悬停按钮的样式，创建一个：hover伪类并以这种方式应用该样式，或者您可以使用javascript向元素添加一个类，该类将具有与悬停按钮完全相同的css

.元素：悬停{ 在此处添加样式 }

或

var元素=document.getElementByClassName（'.className'）

---

元素addClass（'.classToAdd'）

基金会在这里介绍过您

当

.dropdown pane

（内容包装器）处于活动状态时，按钮被赋予类

.hover

（不要与

：hover

状态混淆）

因此，您可以简单地将特定样式添加到该类中（如果您希望在不同场景中获得多种不同类型的效果，则相对于您的按钮）。您必须手动确保您的基础<代码>：悬停匹配新的<代码>。 HTML（例如）

---

工作示例：好吧，我想这就是让我不高兴的地方，使用.hover和：hover。非常感谢你帮我解决这个问题！

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

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