标签: hover

我甚至对jQuery在一个元素上放置悬停属性的愚蠢方式感到惊讶.看看这个示例CSS:

div.test
{
   width: 20px;
   height: 20px;
   color: #000000;
   background: #FFFFFF;
}
div.test:hover
{
   color: #FFFFFF;
   background: #CC0000;
}

如果我们想将其转换为jQuery,我们必须输入以下内容:

$('div.test').css({
   'width' : '20px',
   'height' : '20px',
   'color' : '#000000',
   'background' : '#FFFFFF'
});
$('div.test').hover(function() {
   $(this).css({
      'color' : '#FFFFFF',
      'background' : '#CC0000'
   });
}, function() {
   $(this).css({
      'color' : '#000000',
      'background' : '#FFFFFF'
   });
});

有没有更好的方法来做到这一点？写出明显的东西感觉很愚蠢.

先感谢您.

我想在链接周围创建一个边框,在整个链接上形成一个正方形:hover.我该如何达到这个效果？

我正在更新我的网站并使用了本文如何使用HTML和CSS在我的网站上显示社交图标？在我的网站上添加一些社交媒体图标。

现在我想知道如何实现悬停效果（即更改不透明度）。我知道这应该只是几行代码，但是我不知道如何实现（CSS初学者）

我有一个5个不同图像序列,每个图像在一个单独的div中.在这些下面,我有另一个div,我打算用文本填充,取决于悬停的图像.

我们的想法是,每个图像悬停时都会用相关信息填充此文本div.我也想让这个div动画,以便它从高度0开始并将其扩展到150px然后添加文本,当鼠标移开图像时它应该折叠.

这个区域下面有一个页脚,所以我不能隐藏它,然后在悬停时显示.

使用JavaScript/JQuery有一个简洁的方法吗？

谢谢

编辑:

我自己把一些东西放在一起尝试解决这个问题,但有几个问题

$(document).ready(
    function(){    
        $("#upper").hover(
            function(){
                $('#caption').animate({'height': '150px'}, 1500);
                $('#caption').html('Tesrtssadwa');
            }, 
            function(){
                $('#caption').stop().animate({'height': '0px'}, 1500);
            }
        );
}
);

所以这几乎可以解决我想要的几个问题.如果我快速将鼠标悬停在div上几次,它会将动画排队.理想情况下,我希望不会发生这种情况.有没有一种简单的方法可以做到这一点,还是比它的价值更麻烦？

此外,有一次我设法让div崩溃,但文字仍在显示.我无法重现这一点但有没有办法让文字在div崩溃时消失？

$('#caption').html('');

看起来有点糟糕

编辑:我可以重现它.将鼠标悬停在图像上直到它完全展开,然后移开它会使div崩溃,文本将重新出现.

我有一个样式链接。现在，我想在悬停时在链接的几个字母上设置另一种样式，这是另一种颜色。

例子：

这是正常链接

这是悬停时的标准AL链接，其中AL为斜体和其他颜色。