下拉触发视觉“活动的” Like“哈弗” [基金6]

见一个基本的悬停下拉列表窗格下面的代码：下拉触发视觉“活动的” Like“哈弗” [基金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>

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

任何你可以提供的洞察力将非常感激。

来源

2017-04-11 Joe W.

基金会你在这里覆盖。

当.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/ < <（及以上），我手动设置:hover和.hover因为我已经使用了一个默认的F6 CSS版本，它有一个设置为:hover的状态，但是如果你有al准备好集:hover（例如到）你不需要重新设置它。

来源

2017-04-12 10:24:48 tymothytym

好吧，我认为这就是抛弃我，使用.hover与：悬停。非常感谢帮助我解决这个问题！ –

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

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

或

变种元素= document.getElementByClassName（ '的className。'）;

element.addClass（'。classToAdd'）;

来源

2017-04-11 14:21:04

下拉触发视觉“活动的” Like“哈弗” [基金6]

回答

相关问题