如何使用 jquery 淡入文本装饰 css？

我有以下代码：

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

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

这似乎是一个简单的问题，但我一直不知道如何最好地做到这一点。需要明确的是，我不能只使用css:hover。我需要使用 JQuery 来完成此操作，因为实际问题比此处所示的更复杂并且需要更多的控制。非常感谢您提前提供的帮助。

这可能不符合您的需求，而且我意识到您特别不想使用 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;
}​

Script

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

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