How to custom onmouseover property in html?

I am trying to custom tabs. When a tab is active, I would like it to have its title underlined. I don't know why, but I can't reach it with CSS, it must need a css syntaxe I can't think of.

So, I was thinking maybe to custom my html code with some css property? Is there anyway to attribute the onmouseover with visited, hover and active to my <div> in html?

Here is HTML I have

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

Solution

Plain JS solution:

Give each tab a separate class, in this example .option#
Set each to underline its title and content on 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>