如何在 html 中自定义 onmouseover 属性？

Question

我正在尝试自定义标签。当一个选项卡处于活动状态时，我希望它的标题带有下划线。我不知道为什么，但我无法用 CSS 到达它，它必须需要一个我想不到的 css 句法。

所以，我在想也许可以用一些 css 属性自定义我的 html 代码？无论如何要将 onmouseover 与 visited、hover 和 active 归因于我在 html 中的 <div>？

这是HTML我有

<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

如果你有一个 <a> 标签 div 在 div 元素之前尝试一些内联 stlye 标签。例如：

<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来实现它，它将访问事件存储到浏览器持久层（Cookie，Storage API）。在页面加载后，一个 init JS 脚本应该从持久层读取信息并将一些 class 添加到 div 元素。

Answer 2

普通 JS 解决方案：

给每个选项卡一个单独的 class，在这个例子中 .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>

如何在 html 中自定义 onmouseover 属性？

How to custom onmouseover property in html?

html

css

onmouseover