0

我正在尝试根据悬停在哪个链接上来显示不同的类（具有背景图像）。我已经整理了一个JSfiddle来展示我已经走了多远。

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

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

.twoStars

三颗星使用

.threeStars

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

希望这是有道理的，我想小提琴会解决问题。

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

谢谢

4

2 回答 2

1

好的，首先，正如我在评论中指出的那样，你的 Array 没有被填充，因此你的if陈述是错误的。除此之外，虽然类命名系统还不错（尽管我认为破折号在类名中比小驼峰式大写更标准），但您的 jQuery 中存在一些严重的冲突。

你的 CSS 很好，而且 HTML 结构并不可怕。我也可以改变，但我会从 Javascript 开始，正如我想象的那样，你可能已经放了很多 HTML，可能还有 CSS。js是一个简单易行的改变。以下是“我”如果交给我可能会如何重写它。我相信它可以达到您想要的效果，而无需冗长的 if 语句。我还使用jQuery 的 .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
    })
})

工作示例

Alt 示例
- 还展示了“淡入淡出”效果的一些替代用途

于 2013-06-24T13:12:04.800 回答
0

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

您在不透明中使用字符串，您可以将其删除。它需要介于 0 和 1 之间的数字，并且您也只需要 css 中的不透明度。( http://www.quirksmode.org/css/opacity.html )

于 2013-06-24T12:38:18.980 回答