Question

一旦意识到你不能拥有内联伪类 - How to write a:hover in inline CSS? - 我试着让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，但请注意，类应具有语义含义，而不是样式化。

在Javascript中加下划线？

3 个答案: