mouseenter（）和mouseleave（）jquery无法正常工作

Question

我有一个带有一些元素的导航栏。我想添加一个动画，以便当鼠标进入和离开相应的元素时，元素会改变颜色。但是动画似乎不起作用。

HTML：

<nav class = "navbar navbar-default navbar-top-fixed">
    <div class  ="container-fluid">
        <ul class = "navbar-left navbar-brand top-buffer">
            <li >
                <text><b>START BOOTSTRAP</b></text>
            </li>
        </ul>
        <ul class = "navbar-right top-buffer">
            <li>
                <text><b>PORTFOLIO</b></text>
            </li>   
            <li>
                <text><b>ABOUT</b></text>
            </li>   
            <li>
                <text><b>CONTACT</b></text>
            </li>
    </div>
</nav>

jQuery的：

<script src="./jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>      
<script>
    $(document).ready (function () {
        $(".navbar text").mouseenter(function () {  
            $(this).css("color","#18bc9c");
        }); 
        $(".navbar text").mouseleave(function () {
            $(this).css("color","#ffffff");
        }); 
</script>

Answer 1

首先，你在js的末尾错过了一个结束});，其次，我没有看到你已经加载了jquery，只有jquery-ui，我已经为你设置了一个小提琴代码工作：

http://jsfiddle.net/2q86jn7f/

$(document).ready(function () {

    $(".navbar text").mouseenter(function () {
        $(this).css("color", "#18bc9c");
    });

    $(".navbar text").mouseleave(function () {
        $(this).css("color", "#ffffff");
    });
});

Answer 2

您没有关闭所有功能。再添加一个});到最后。

Answer 3

您在标记中遗漏</ul>，在});部分遗漏JS。但是你不需要jQuery就可以了，只需使用CSS，如下所示：

li:hover {
    color: #18bc9c;
}

Answer 4

1. 您缺少jQuery库。
2. 使用span代替text元素。请参阅下面的图片。
3. 缺少HTML结束标记ul和脚本结束括号。

验证错误：



$(document).ready(function() {

  $(".navbar span").mouseenter(function() {

      $(this).css("color", "#18bc9c");

    }),

    $(".navbar span").mouseleave(function() {

      $(this).css("color", "#ffffff");


    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-top-fixed">
  <div class="container-fluid">
    <ul class="navbar-left navbar-brand top-buffer">
      <li>
        <span><b>START BOOTSTRAP</b>
        </span>
      </li>
    </ul>
    <ul class="navbar-right top-buffer">
      <li>
        <span><b>PORTFOLIO</b>
        </span>
      </li>
      <li>
        <span><b>ABOUT</b>
        </span>
      </li>
      <li>
        <span><b>CONTACT</b>
        </span>
      </li>
    </ul>

  </div>
</nav>

Answer 5

<text>不是有效的HTML代码。抛弃它并尝试".navbar li"。你也没有关闭$(document).ready()

Answer 6

根据您的代码示例，看起来缺少jQuery库。