htmlのカスタムonmouseoverプロパティはどうですか？

Question

カスタムタブを試しています。タブがアクティブになっているときは、タイトルに下線を付けることをお勧めします。私はなぜ、私はCSSでそれを達成することはできません、それは私が考えることはできませんCSSの構文が必要になります知りません。

だから、私はおそらくいくつかのCSSのプロパティで私のHTMLコードをカスタムすることを考えていた？とにかくonmouseoverとvisitedとhoverとactiveとの関連がありますか？<div>はhtmlですか？ここで

は<a>タグを使用してtheresのであれば、私はdiv要素の前にいくつかのインラインstlyeタグを試してみてくださいDIV

<div class="container"> 
 
    <div class="tabcordion"> 
 
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <li class="active"><a data-target=".KONTAKT">KONTAKT</a></li> 
 
     <li><a data-target=".ÜBER_UNS">ÜBER UNS</a></li> 
 
    </ul> 
 
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <div class="KONTAKT in active">My content #1.</div> 
 
     <div class="ÜBER_UNS">My content #2.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

平野JSソリューション：

• 各タブに別のクラスを付けて、この例では.option#
• はclickにそのタイトルや内容を強調するために、それぞれを設定します。

document.querySelector('.option1').addEventListener('click', function() { 
 
    //remove underline from any non selected tab title 
 
    document.querySelector('.option2').classList.remove('underline'); 
 
    // underline clicked tab title 
 
    this.classList.add('underline'); 
 
}) 
 
document.querySelector('.option2').addEventListener('click', function() { 
 
    document.querySelector('.option1').classList.remove('underline'); 
 
    this.classList.add('underline'); 
 
})

.underline { 
 
    text-decoration: underline; 
 
}

<div class="container"> 
 
    <div class="tabcordion"> 
 
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li> 
 
     <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li> 
 
    </ul> 
 
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <div class="KONTAKT in active">My content #1.</div> 
 
     <div class="ÜBER_UNS">My content #2.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

を持つHTMLです。 は、例えば：

<style type="text/css"> 
    #your-div-id a:visited { 
    } 
</style> 
<div id="your-div-id"><a href="#">Foo</a></div> 

そうでなければあなただけの次のCSSスタイルでホバー効果を処理することができます。

#your-div-id:hover { 
    color: red 
} 

div要素は<a>要素のような訪問履歴を保存しませ。同じ効果を得たい場合は、少しのJavaScriptで実装する必要があります。JavaScriptは訪問イベントをブラウザの永続レイヤ（Cookie、Storage API）に保存します。そして、ページロードの後、init JSスクリプトは、持続層から情報を読み込み、何らかのクラスをdiv要素に追加する必要があります。