Question

激活伪类是否可能，例如：

我的css中有以下内容：

#gallery a span {
    border:#006553 3px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:89px;
    width:89px;
}

#gallery a:hover span {
    border:#f3bd2f 6px solid;
    position:relative;
    overflow:hidden;
    display:block;
    top:0px;
    left:0px;
    height:83px;
    width:83px;
}

当用户将鼠标悬停在链接上时，我希望为转换设置动画，即跨度边框必须增长。

有人可以吗？

提前致谢。

//编辑：

我查看过'animateToSelector'的jQuery插件，并使用了以下jQuery函数调用，但是没有动画，边框只是在上面指定的样式之间跳转。

这是我的函数调用：

$("#gallery a span").animateToSelector({selectors: ["#gallery a:hover span"], properties: ['border'], events: ['mouseover','mouseout'], duration: 3000});

任何人都能看到我失踪的东西吗？

Answer 1

James Paolsey的article可能会帮助你实现这样的转变。

Answer 2

jQuery UI提供了一个function，可以将元素从一个类动画到另一个类

$(".gallery a").mouseover(function(){  
  $(this).switchClass('newClass', 'anotherNewClass', 1000);
})

Answer 3

为什么不在鼠标悬停时绑定动画？

$("#gallery a").mouseover(function(){
  var span = $(this).children("span");
  //animate something on the span
});

在jQuery中使用Animate伪类

3 个答案: