blocks|key|469794|text|您需要在选择器中将"this"更改为this才能访问事件源。在选择器中使用"+this“将搜索标签名称，就像jQuery("input")将获得名称为input的所有标签一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|469795|变化|469796|+jQuery("this")|code-block|syntax|javascript|469797|至|469798|+jQuery(this)|469799|您可以通过here查看"this"与this之间的差异|469800|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rajaadil/T8NU2/1/^0|9|6|I|4|1I|F|23|5|0|0|0|0|0|B|6|I|4|5|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|S|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

You need to change <code>"this"</code> to <code>this</code> in the selector to access the source of event. Use "this" in selector will search for tag names this, like <code>jQuery("input")</code> will get all tags with name <code>input</code>.

Change

<pre><code> jQuery("this")
</code></pre>

To

<pre><code> jQuery(this)
</code></pre>

You can check the difference between <code>"this"</code> to <code>this</code> over <a href="http://jsfiddle.net/rajaadil/T8NU2/1/" rel="nofollow">here</a>

blocks|key|5244433|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5244434|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+);
++++});
+});|code-block|syntax|javascript|5244435|您可以尝试使用.parent('li')|offset|length|style|CODE|5244436|或者试试这个：|5244437|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+);
++++});
+});|5244438|entityMap^0|0|0|7|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Try this:

<pre><code>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 );
 });
 });
</code></pre>

You can either try with <code>.parent('li')</code>

or try this:

<pre><code>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 );
 });
 });
</code></pre>

blocks|key|468754|text|首先:你的选择器是错误的。您没有带有.site-link的<a>。你有一个带有.site链接的<li><a>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|468755|因此：|468756|$(".site-links").hover(function(){
jQuery(this).parent().stop().animate({
++++backgroundColor:+"#000"
++++},+1000+);
});|code-block|syntax|javascript|468757|这是一个不透明的演示：http://jsfiddle.net/2VgBa/|468758|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/2VgBa/^0|T|3|1B|7|0|0|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

First: your selector is wrong. You don't have <code>&lt;a&gt;</code> with .site-link. You have <code>&lt;li&gt;&lt;a&gt;</code> with a .site-link

Therefore:

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

Here is a demo with opacity:
<a href="http://jsfiddle.net/2VgBa/" rel="nofollow">http://jsfiddle.net/2VgBa/</a>

blocks|key|5244531|text|除了$("this")到$(this)的修复之外，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5244532|jQuery("li.site-links")查找类为site-links的li，但您的活动站点上没有，因此此选择器不会选择任何内容。|5244533|为了解决这个问题，这些都可以工作|5244534|5244535|将选择器更改为"li+.site-links"以指向任何li中的任何.site-links，或者|unordered-list-item|5244536|将site-links类添加到li+(<代码>d14)，或者<代码>H215<代码>H116将选择器更改为"a.site-links以指向具有类site-links.|5244537|的任何<代码>d18|5244538|5244539|此外，您尝试在每次悬停时将背景颜色动画化为黑色，但您永远不会撤消动画。这是你想要的吗？也许你想要这样的东西|5244540|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+);
});|code-block|syntax|javascript|5244541|5244542|如果在IE<10中减少体验(没有动画，背景突然改变)不是问题，你应该使用CSS转换，因为它们可以转换任何类型的背景(不仅仅是颜色)，并且不需要javascript：|5244543|#menu-bar+li{
++transition:+1s;
++-webkit-transition:+1s;
++background:+url("../imgs/menu-normal.png");
}

#menu-bar+li:hover{
++background:+url("../imgs/menu-hover.png");
}|5244544|entityMap^0|2|9|C|7|0|0|N|R|A|12|2|0|0|0|7|G|S|2|Y|B|0|1|A|F|2|1H|D|20|A|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1I|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|N|3|O|5|M|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|20|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|21|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|22|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|23|8|@]|D|@]|E|$X|Y]]|$1|Z|3|-4|5|6|7|24|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|25|8|@]|D|@]|E|$]]|$1|12|3|13|5|W|7|26|8|@]|D|@]|E|$X|Y]]|$1|14|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|15|$]]

Apart from the <code>$("this")</code> to <code>$(this)</code> fix,

<code>jQuery("li.site-links")</code> looks for a <code>li</code> with the class <code>site-links</code>, but there are none on your live site, so this selector does not select anything.

To fix this, any of these will work

<ul>
<li>change the selector to <code>"li .site-links"</code> to target any <code>.site-links</code> within any <code>li</code>, or</li>
<li>add the <code>site-links</code> class to the <code>li</code> (<code>&lt;li class="site-links"&gt;</code>), or</li>
<li>change the selector to <code>"a.site-links</code> to target any <code>a</code> with the class <code>site-links</code>.</li>
</ul>

<hr>

Also, you try to animate the background color to black on every hover, but you never undo the animation. Is that what you want? Perhaps you want something like

<pre><code>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 );
});
</code></pre>

<hr>

If reduced experience in IE&lt;10 (no animation, background changes abruptly) is not an issue, you should use CSS transitions as they can transition any kind of background (not just colors) and no javascript is needed:

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

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

Web Developer is showing my JavaScript as being valid, but if I run the page this does not work. I tried following the usage on jquery-color's site, but it kept returning property id missing everytime. I really wish when I took JavaScript in college that I had a better instructor. He flashed through jQuery and most of JavaScript as a whole without really teaching it.

Edit #1: I fixed the (this) error in the code, but still a no go.

Here is the code for the jQuery:

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

and site link: <a href="http://lab.nmjgraphics.com" rel="nofollow">http://lab.nmjgraphics.com</a>

Why isn't this showing?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Web Developer显示我的JavaScript是有效的，但如果我运行该页面，这将不起作用。我尝试在jquery-color的网站上跟踪使用，但每次都返回属性id missing。我真的希望我在大学里学习JavaScript的时候能有一个更好的老师。他闪现了一下jQuery和JavaScript的大部分内容，但并...

问为什么这个没有显示出来？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么这个没有显示出来？EN