Question

我试图在触发mouseenter事件时应用样式，但是如果我取消注释以下未触动的选择器 - 即使文档就绪也停止工作。

<body>
<div id="1" class="button untouched"></div>
<script src="/jquery.js"></script>
<script>
$(document).ready(function(){
    alert("JQuery is working");
});

/*
$(".untouched").mouseenter($function(){
    $(this).addClass("touched");
});
*/
</script>
</body>

我正在关注以下示例：

http://api.jquery.com/mouseenter/

我得到了following error in Firebug：

missing ) after argument list
[Break On This Error]   

$(".untouched").mouseenter($function(){

由于它不起作用，我犯了一个错误，但我不知道是什么。我所知道的是，如果我让它运行，我的代码都没有用。我下载了jQuery的最新1.7.2版本，我知道该版本在页面上可用，因为alert()运行时另一个已注释掉。

Answer 1

不需要函数前面的$。此外，mouseenter事件功能代码应该在文档准备好的内部。

<script>
     $(document).ready(function(){
         alert("JQuery is working");

         $(".untouched").mouseenter(function(){
             $(this).addClass("touched");
         });
     });
</script>

Answer 2

在您的脚本中，$(".untouched")部分应位于ready函数中。另外，

mouseenter($function(){ $符号不正确。

您的最终脚本应如下所示：

$(document).ready(function(){
    alert("JQuery is working");

    $(".untouched").mouseenter(function(){
        $(this).addClass("touched");
    });
});

Answer 3

你有一个额外的$，你不应该在单词function前面。您可能还想删除untouched类：

$(".untouched").mouseenter(function(){
    $(this).removeClass("untouched").addClass("touched");
});

Answer 4

您可以通过css轻松执行此操作

    .untouched 
       {
       background: green;
      }

    .untouched :hover
      {
       background: blue
       }

在JQuery中，如果你想使用.mouseover，你需要使用一个函数 - 一个用于鼠标悬停时，一个用于鼠标未结束时。这在css中更容易，只有一个：悬停过滤器

       $('.untouched').mouseover(function() {
               $(this).addClass('touched');
                     });
       $('.untuoched').mouseout(function() {
              $(this).removeClass('touched');
                      });

使用mouseenter事件导致语法错误的Javascript / jQuery新手错误

4 个答案: