ドロップダウントリガー視覚的に「ホバー」のように「アクティブ」[財団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州に合っていることを手動で確認しなければなりません。私は手動でIので:hoverと.hoverを設定しています（上記と）https://jsfiddle.net/tymothytym/8re4jcy0/ <この例では<：

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

の作業例

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あなたが設定したデフォルトのF6 CSSビルドを:hoverに設定しましたが、レディセット:hover（例： 〜​​）、再設定する必要はありません。

Answer 2

cssを使用してください。ホバリングされたオーバーボタンのスタイルを見つけて：ホバー擬似クラスを作成し、そのようにスタイルを適用するか、javascriptを使用して、オーバーヘッドボタンと同じCSSを持つクラスをエレメントに追加できます。

.element：ホバー{ここで 追加スタイル}

又は

VAR要素= document.getElementByClassName（ 'クラス名。'）;

element.addClass（ '.classToAdd'）;