Question

Web Developer将我的JavaScript显示为有效，但如果我运行该页面，则无效。我尝试在jquery-color的网站上使用它，但它每次都会丢失返回的属性ID。我真的希望当我在大学里学习JavaScript时，我有一个更好的教练。他通过jQuery和大多数JavaScript作为一个整体而没有真正教授它。

编辑＃1：我修复了代码中的（this）错误，但仍然没有。

以下是jQuery的代码：

<script type="text/javascript">
        jQuery("li.site-links").hover(function(){
            jQuery(this).stop().animate({
                backgroundColor: "#000000"
            }, 1000 );
        });
    </script>

和网站链接：http://lab.nmjgraphics.com

Answer 1

您需要在选择器中将"this"更改为this才能访问事件来源。在选择器中使用“this”将搜索此标记名称，例如jQuery("input")将获取名称为input的所有标记。

更改

 jQuery("this")

要

 jQuery(this)

您可以检查"this"与this之间的区别here

Answer 2

试试这个：

jQuery(function(){
   jQuery("a.site-links").hover(function(){
        jQuery(this).closest('li').stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });

您可以尝试使用.parent('li')

或试试这个：

jQuery(function(){
   jQuery("a.site-links").parent('li').hover(function(){
        jQuery(this).stop().animate({
            backgroundColor: "#000000"
        }, 1000 );
    },function(){
        jQuery(this).closest('li').stop().animate({
        backgroundColor: "transparent"
    }, 1000 );
    });
 });

Answer 3

首先：你的选择器错了。您没有。{ - 1}} .site-link。您有<a>个.site-link

因此：

<li><a>

以下是不透明度的演示： http://jsfiddle.net/2VgBa/

Answer 4

除了$("this")到$(this)修正，

jQuery("li.site-links")会查找li类site-links，但您的实际网站上没有，因此此选择器不会选择任何内容。< / p>

要解决这个问题，其中任何一个都可行

将选择器更改为"li .site-links"以定位任何.site-links内的任何li，或
将site-links课程添加到li（<li class="site-links">）或
将选择器更改为"a.site-links以定位任何a类site-links。

此外，您尝试在每个悬停时将背景颜色设置为黑色，但您永远不会撤消动画。那是你要的吗？也许你想要像

这样的东西

jQuery("li.site-links").hover(function(){
    jQuery(this).stop().animate({
        backgroundColor: "rgb(79, 89, 100)"
    }, 1000 );
},function(){
    jQuery(this).stop().animate({
        // color alpha not supported in IE8: http://caniuse.com/#search=rgba
        backgroundColor: "rgba(79, 89, 100, 0)"
    }, 1000 );
});

如果IE中的体验减少<10（没有动画，背景突然变化）不是问题，你应该使用CSS过渡，因为它们可以转换任何类型的背景（不仅仅是颜色），不需要javascript：

#menu-bar li{
  transition: 1s;
  -webkit-transition: 1s;
  background: url("../imgs/menu-normal.png");
}

#menu-bar li:hover{
  background: url("../imgs/menu-hover.png");
}

为什么不显示？

4 个答案: