Question

我有一个带有浅色边框的图像缩略图，在鼠标悬停时，我想要交叉渐变到深色边框。我认为实现这一目标的最简单方法是淡化第二个div，边框比现有边框更暗。

是否有更好或不同的方式来淡化边框颜色变化？

感谢。

Answer 1

将 jQuery UI 加载到您的页面中。包含在核心包中（如果我没有记错;您可能需要自定义下载包）是能够在颜色值（和/或两个CSS类之间的转换）上使用jQuery的.animate()。这是开箱即用的核心jQuery库中没有的东西。

有了这个，你可以像以下一样做一些琐事：

// e.g. assuming #foo has default border-color #999999
$('#foo').on('mouseover', function () {
    $(this).animate({
        borderColor : "#333333"
    });
});

根据您的兴趣进行修改。

修改

实现这一点的最简单方法是利用CSS本身，并使用jQuery在CSS规则之间切换。

#foo { border-color:#999; }
#foo.hovering { border-color:#333; }

然后你可以使用jQuery UI的扩展jQuery函数进行转换：

$('#foo').hover(
    function () {
        // this is on mouseover
        $(this).addClass('hovering', 'fast');
    },
    function () {
        // this is on mouseout
        $(this).removeClass('hovering', 'fast');
    }
);

Answer 2

有很多方法。

一个是通过CSS3过渡。虽然不能在IE中使用，但您可以逐步增强现代浏览器。

假设您的div有一个imageBorder类：

div.imageborder {border-color: #FFFFFF;}
div.imageBorder:hover {
    border-color: #FF0000;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

另一种方法是使用javascript，这是一个jQuery示例：

$('div.imageBorder').hover(
    function(){
      $(this).animate({
        border-color: '#FF0000',
        },200,function(){});
    },
    function(){
       $(this).animate({
        border-color: '#FFFFFF',
        },200,function(){});
    }
);

这也适用于IE，但代价是加载额外的库。

Answer 3

将缩略图放在带有浅色边框的DIV中（默认），稍后在鼠标悬停时找到div并更改样式（border-width和border-color），虽然它不是fadding样式但是用户快速鼠标悬停和图像上的mouseout看起来像是小的fadding效果，这就足够了我猜。编写自己的javascript代码以使其更快（jQuery肯定会获得更多时间javascript代码）。

Answer 4

你可以在边框颜色上应用CSS3过渡吗？

有没有更好的方法来实现这种效果？

4 个答案:

修改