Question

我正在使用我在网站上找到的小提琴，我修改了它以适应我想要完成的任务。我把它放在小提琴里，在这里：

HTML

<div id="fish">test 123</div>

CSS

#fish{background-image:url(http://testsite.perseocigar.com/menu_nohover.png);width:120px;height:108px;}

的JavaScript

$('#fish').hover(
  function(){$('#fish').css("background-image", "url(http://testsite.perseocigar.com/menu_hover.png)")},
  function(){$('#fish').css("background-image", "url(http://testsite.perseocigar.com/menu_nohover.png)")}
);

但是让它在网站上运行，我显然错过了一些我猜的很痛苦的东西。我完全按照我在主站点，测试页面上尝试做的那样做了，但它仍然无法正常工作。

http://testsite.perseocigar.com/Untitled-2.html是测试网站的链接。

我尝试让它在我的本地计算机上运行，同时我构建了该站点，并且还试图查看它是否在Web服务器上运行，并且两者都无处可去。任何帮助都会很棒。

Answer 1

我看到了这个问题并且自己经历了几次，我读到的最好的建议是使用Notepad ++找到\ u8203字符。我使用emacs，当我尝试保存iso-8859-1编码时，它为我指出了这个角色。

The EXACT same code doesn't work as it should in Dreamweaver

Works in jsFiddle but not in my Site

Codes works jsfiddle not working on dreamweaver

Answer 2

我在Chrome中运行了测试页面，显示了开发人员工具，在控制台下显示错误：

Unexpected Token ILLEGAL

行尾可能有一些奇怪的字符。我建议你删除该行并再次输入。

Answer 3

您是否尝试将其放入

中

$(document).ready(function() {
   $('#fish').hover(function() {
      $('#fish').css("background-image", "url(http://testsite.perseocigar.com/menu_hover.png)");
   }, function() {
      $('#fish').css("background-image", "url(http://testsite.perseocigar.com/menu_nohover.png)");
   });
});

如果要对多个元素使用相同的代码。不要这样做

$(document).ready(function() {
    $('#fish').hover(function() {
       $('#fish').css("background-image", "url(images/menu_hover.png)");
    }, function() {
       $('#fish').css("background-image", "url(images/menu_nohover.png)");
    });
});

$(document).ready(function() {
     $('#fish1').hover(function() {
       $('#fish1').css("background-image", "url(images/menu_hover.png)");
     }, function() {
       $('#fish1').css("background-image", "url(images/menu_nohover.png)");
      });
 });

你可以像这样把它们放在一起

$(document).ready(function() {
    $('#fish,#fish2,#fish3,#fish4,#fish5').hover(function() {
       $(this).css("background-image", "url(images/menu_hover.png)");//<-- Then use 'this' to refer to the current element firing the event
    }, function() {
       $(this).css("background-image", "url(images/menu_nohover.png)");
    });
});

或者甚至更好地为你的元素提供他们共享的课程。

<div id="fish" class="fishhover">test 123</div>
<div id="fish1" class="fishhover">test 123</div>
<div id="fish2" class="fishhover">test 123</div>
<div id="fish3" class="fishhover">test 123</div>
<div id="fish4" class="fishhover">test 123</div>

然后按类

选择它们

$(document).ready(function() {
    $('.fishhover').hover(function() {
       $(this).css("background-image", "url(images/menu_hover.png)");//<-- Then use 'this' to refer to the current element firing the event
    }, function() {
       $(this).css("background-image", "url(images/menu_nohover.png)");
    });
});

实施小提琴的问题

3 个答案: