0

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

4

4 回答 4

4

您需要在选择器中更改"this"为this以访问事件源。在选择器中使用“this”将搜索标签名称 this ，就像jQuery("input")将获取所有带有 name 的标签input。

改变

 jQuery("this")

到

 jQuery(this)

您可以在此处"this"查看to之间的区别this

于 2013-01-30T07:42:47.397 回答
0

试试这个：

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 );
    });
 });
于 2013-01-30T07:43:52.870 回答
0

首先：您的选择器错误。你没有<a>.site-link。你有<li><a>一个 .site-link

所以：

$(".site-links").hover(function(){
jQuery(this).parent().stop().animate({
    backgroundColor: "#000"
    }, 1000 );
});

这是一个不透明的演示：http: //jsfiddle.net/2VgBa/

于 2013-01-30T07:58:32.333 回答
0

除了$("this")要$(this)修复，

jQuery("li.site-links")查找li带有 class的 a site-links，但在您的实时站点上没有，因此此选择器不会选择任何内容。

要解决此问题，这些中的任何一个都可以使用

  • 将选择器更改为以any"li .site-links"为目标，或.site-linksli
  • 将site-links类添加到li( <li class="site-links">)，或
  • 将选择器更改为以class"a.site-links为目标。asite-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");
}
于 2013-01-30T08:00:42.160 回答