javascript - 如何使用 jquery 淡化文本装饰 css？

Question

我有以下代码:

This is a <span id="sentence">sentence</span>.

当用户将鼠标悬停在 sentence 上时，我希望在单词下方淡入一条下划线。

这似乎是一个如此简单的问题，但我一直无法弄清楚如何最好地做到这一点。明确一点，我不能只使用 css:hover。考虑到实际问题比此处说明的更复杂并且需要更多控制，我需要使用 JQuery 来执行此操作。非常感谢您的提前帮助。

Answer 1

这可能不符合您的需求，而且我知道您特别不想使用 CSS。但以防万一...

HTML

This is a <span id="sentence">sentence.</span>​

CSS

span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    border-bottom: 1px solid transparent;
}

span.clicked {
    border-bottom: 1px solid black;
}​

脚本

$('span').click(function(){
  $(this).addClass('clicked');
});

http://jsfiddle.net/as42u/4/