Question

我有一个问题，我想在悬停时添加一个箭头。我想这样做是javascript，因为我也使用jquery缓动（对于此测试已停用），如果用户没有javascript，它将在linktext后面

任何填充和背景颜色都有效！但不是形象？我不明白为什么。在css中，它的工作方式与此类似！

//arrow
        $('.sub-menu a').hover( function(){

            $(this).css('padding-top', '10px');
            $(this).css('padding-bottom', '10px');
            $(this).css('background-color', 'black');
            $(this).css('background-image', 'url(http://127.0.0.1/wp-content/themes/nicores/nico/small_arrow_white.png) !important');
            $(this).css('background-repeat', 'no-repeat !important');
            $(this).css('background-position', '25px 8px !important');
        },
        function(){

            $(this).css('background', 'none');

        });

我从Firebug得到这个我不知道“背景：无...滚动”来自哪里

padding-top: 10px; padding-bottom: 10px; background: none repeat scroll 0% 0% transparent;

Answer 1

你能用本地图片试试吗？尝试给出图像的相对路径而不是整个URL。

Answer 2

就像@elclanrs所说，!important不应该存在。事实上，这是导致问题的原因。尝试删除它。

这是一个 simplified demo

Answer 3

你为什么要使用jQuery？这可以通过简单的CSS来完成。

然后，你使用了太多!important，不管怎样都不应该用jQuery设置。试着摆脱那些并以更好的方式组织你的CSS。

看看http://jonrohan.me/guide/css/creating-triangles-in-css/。

如果你想要缓和，那么只需创建一个div，用css设置箭头样式，隐藏div并用jQuery显示它。

你能提供一个jsfiddle，这样你就可以更容易地看到你想要完成的事情吗？

Answer 4

我认为重要的是问题。如果你看，没有标记为重要的样式。

我建议在样式表中为此定义css类，并使用jQuery添加删除类名，而不是直接设置样式。

顺便说一句，通过将这些类型的jQuery调用组合到一个调用中，您可以大大提高代码的性能，如下所示：

$(this).css({
    'padding-top': '10px',
    'padding-bottom': '10px',
    'background-color', 'black',
     ...etc
});

Answer 5

理想情况下，您应该将所有CSS放在一行代码中，就像您在悬停功能中一样：

    $('.sub-menu a').hover( function(){

        $(this).css({'padding':'10px 0', 'background':'url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000'});
    },
    function(){
        $(this).css('background', 'none');
    });

您还应该检查图像的路径 - 相对和绝对 - 并查看它是否被拾取。此外，由于您没有使用动画或过渡效果，为什么不使用CSS？

.sub-menu a{
    background:none;
}

.sub-menu a:hover{
    background:url(/path/to/image/small_white_arrow.png) no-repeat 25px 8px #000000;
}

jQuery没有添加背景图像

5 个答案: