javascript - Javascript中的下划线？

Question

意识到你不能有一个内联伪类——如何在内联 CSS 中编写 a:hover？-- 我考虑让 Javascript 对onMouseOver和onMouseOut事件做同样的工作来模拟:hover伪类。当鼠标在文本上方时，我试图从文本中删除下划线。是否有人可以提供可以做到这一点的 Javascript 片段？

我试过onMouseOver="this.style.textDecoration="none""了，但我认为对比鲜明的引文把一切都抛诸脑后了。

有任何想法吗？

注意：不幸的是，必须在不使用外部或内部样式表（仅限内联）的情况下实现此效果。

Answer 1

你可以这样做

 onMouseOver="this.style.textDecoration='none';"

Answer 2

这是你的答案：

<a onmouseover="this.style.textDecoration='none';"  onmouseout="this.style.textDecoration='underline';">hover me</a>

如果你能够使用 jQuery 会更容易。只需编写一次以下代码。那时您无需更改标记。

<script type="text/javascript">
(function($) {
    $( function() {
        $('a').hover(
            function() {
                $(this).css('text-decoration','none');
            },
            function() {
                $(this).css('text-decoration','underline');
            }
        )
    } );
} (jQuery));
</script>

Answer 3

我认为你不应该使用 javascript，而是 CSS：

.underlineHover:hover {
    text-decoration: underline;
}

<span class="underlineHover">Content</span>

注意：我使用了类underlineHover，但请注意类应该具有语义而不是样式。