2

我真的是 JS 的新手。我正在使用这个脚本来创建工具提示：

<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover'."onMouseOut="javascript:this.className='SimpleTip'">

它工作得很好，但我想在工具提示出现时添加淡入效果。

谢谢

4

3 回答 3

3

这是 jquery 文档http://api.jquery.com/category/effects/fading/的链接

你想做这样的事情：

$('.SimpleTip').on('mouseOver', function (){ 
    $('.SimpleTipHover').fadeIn();
}
于 2012-10-24T17:59:31.650 回答
1

您可以使用带有计时器和更改不透明度的纯 javascript 来执行此操作，但更简单的是仅使用 jQuery 来隐藏/显示提示

或者你可以使用CSS3 过渡

于 2012-10-24T17:55:04.407 回答
0

此示例使用 CSS 过渡

http://jsfiddle.net/nickaknudson/mZmuQ/

JS

<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover';"onMouseOut="javascript:this.className='SimpleTip';">test</span>​

CSS

.SimpleTip {
    background-color:green;
}
.SimpleTipHover {
    background-color:red;
}
span {
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 1s;
    /* Firefox 4 */
    -moz-transition-property:background;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:1s;
    /* Safari and Chrome */
    -webkit-transition-property:background;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:1s;
    /* Opera */
    -o-transition-property:background;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:1s;
}

资源

于 2012-10-24T18:27:34.237 回答