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

我正在尝试自定义选项卡。当选项卡处于活动状态时，我希望它的标题加下划线。我不知道为什么，但我无法通过CSS实现它，它必须需要一个我无法想到的CSS语法。如何在html中自定义onmouseover属性？

所以，我想也许定制我的HTML代码与一些CSS属性？反正有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>

来源

2017-09-05 Lolo

我不能得到你想要做什么呢？你能更清楚吗？ –

如果他们的意思是“css属性”而不是“css属性”，那么询问谁负责此任务。 –

@AhmetKarabulut好吧，我已经更新了我的问题 – Lolo

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

来源

2017-09-05 15:47:34 Syden

你真的有针对性的问题！这工作，但只有一半。现在标签的内容也会被加下划线。我希望将内容作为普通文本。 – Lolo

@Lolo，现在检查。 – Syden

我有不同的结果：我在PHP页面上工作，从中我的页眉和标签页插件被加载。我的html设置在Wordpress中。当我粘贴Wordpress中的所有html时，标签的内容不会显示出来。当我通过我的php页面中的jQuery脚本链接时，内容＃1和＃2出现在两个选项卡中，但没有下划线！当我在我的标签插件脚本之前通过我的PHP页面中的jquery脚本链接时，内容没有显示出来。 – Lolo

如果孤单是一个<a>标签在你DIV尝试的div元素之前的一些内嵌stlye标签。 E.G：

<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脚本应该读取持久层的信息并向div元素添加一些类。

来源

2017-09-05 09:10:03 xrissz

实际上和''标记在我的div中。但是我无法用CSS达到它......它必须需要一个我无法想到的特殊语法。我用我的html代码更新了我的问题。事情是，我想要自定义不是链接，但标签。点击标签时，会显示其内容，我希望标签的标题加下划线。 – Lolo

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

回答

相关问题