Working Example

Question

我正在尝试显示不同的类（具有背景图像），这取决于悬停在哪个链接上。我已经整理了JSfiddle以显示我已经走了多远。

问题是悬停时没有显示图像。

我也关注我的html的结构，特别是一个类根据其名称显示不同数量的星星，所以要显示两个星级使用类

.twoStars

三颗星使用

.threeStars

等等......这样可以吗？有一个更好的方法吗？而不是在html中为每个li元素添加保存星数的正确类，我是否可以在使用jquery悬停时添加类？我知道jquery有addClass方法，但这只是将它添加到li类而不是我的li中的下一个元素...

希望这是有道理的，我想小提琴会让事情变得清晰。

任何帮助表示赞赏，只是想知道为什么我当前的设置无法按预期工作

由于

Answer 1

好的，首先，正如我在评论中指出的那样，你的阵列没有被填充，因此你的if陈述是不正确的。除此之外，虽然类命名系统并不是那么糟糕（虽然我认为破折号比类似更低的驼峰套管更符合类名称），但是你的确存在一些严重的冲突jQuery的。

你的CSS很好，HTML结构并不可怕。我也可以改变，但我会从Javascript开始，正如我想的那样，你可能已经放了很多HTML，可能还有CSS。 js是一个简单易行的变化。以下是“ I ”可能重写它的方式，如果它交给我的话。我相信它正在实现你想要的效果，没有长期的if声明。我还使用jQuery's .data()方法记录了“原始文本”，但目前我认为没有用。

$(function() {
    //  saves "original text" to LI element's data
    $('.skillsDouble li').each(function(i) { $(this).data("oText", $.trim($(this).text())); });
    //  begins "delegating" events to selected elements, in this case, 'mouseenter' to all LI's of .skillsDouble
    $(document).on("mouseenter", '.skillsDouble li', function(e) {
        //  just to make things easy, I grab the stuff we want to work with and make it local variables
        var txt = $(this).find('.text'),    //  our text element
            rate = $(this).find('[class*=Star]'),   //  our ratings element based on any inner element having a class name "containing the phrase 'Star'"
            oText = $(this).data("oText");  //  our original text, if you still want it for something else

        txt.stop().hide();  //  hide the text
        rate.stop().animate({   //  show the stars
            left: 400,
            opacity: "show"
        });
    })
    .on("mouseleave", '.skillsDouble li', function(e) { //  now delegate mouseleave
        //  same localvariables
        var txt = $(this).find('.text'), rate = $(this).find('[class*=Star]'), oText = $(this).data("oText");

        rate.stop().hide(); //  hide the stars
        txt.stop().fadeIn(1000);    //  show the text
    })
})

Working Example

Alt Example
_{_{- 显示“淡入淡出”效果的其他用法}}

Answer 2

css中有一个display:none;。但是在Javascript中它应该显示你需要添加display:block;

您在不透明度中使用字符串，您可以删除它。它需要0到1之间的数字，你也只需要在css中使用不透明度。（http://www.quirksmode.org/css/opacity.html）

Jquery悬停函数if / else

2 个答案:

Working Example