代码之家 › 专栏 › 技术社区 › Lolo

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

onmouseover css html

Lolo · 技术社区 · 7 年前

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

所以,我在想也许可以用一些css属性来定制我的html代码?还有什么可以归因于 onmouseover 具有 visited hover active 给我的 <div> 在html中?

这是我的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>

2 回复 | 直到 7 年前

Syden 7 年前

在本例中,为每个选项卡指定一个单独的类 .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>

xrissz 7 年前

如果有 <a> 在div中的标记在div元素之前尝试一些内联stlye标记。例如:

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

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

< 要素如果你想达到同样的效果,你需要用一点JavaScript来实现它,JavaScript将访问事件存储到浏览器持久层(Cookie,存储API)。在页面加载之后,init JS脚本应该从持久层读取信息,并向div元素添加一些类。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前