Question

我有以下代码：

function main() {
    
    $("li").hover(function() {
        $(this).effect("highlight");
    });
}

$(document).ready(main);

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel='stylesheet' href='style.css'/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src='script.js'></script>
</head>
<body>
    <ul id="list">
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing 3</li>
    </ul>
</body>
</html>

基本上我想要它完成的是当鼠标悬停在任何列表元素（Thing 1，Thing 2，Thing 3）上时，执行高亮效果（http://api.jqueryui.com/highlight-effect/）。由于某种原因，这不会像我这样做。有人可以解释一下为什么这段代码不起作用以及应该怎么做呢？

Answer 1

您需要包含jQuery ui的库，

工作示例http://jsfiddle.net/vnfvcp5h/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='style.css'/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src='script.js'></script>
</head>
<body>
    <ul id="list">
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing 3</li>
    </ul>
</body>
</html>

并且您不需要将代码包装在函数中并在文档就绪时调用，您只需添加事件侦听器

$(document).ready(function () {
    $("li").hover(function () {
        $(this).effect("highlight");
    });
});

Answer 2

“突出显示”效果也需要加载jQuery UI。

查看http://api.jqueryui.com/highlight-effect/

的示例

Answer 3

尝试另一种方式突出显示。
在css中创建一个包含所需高亮效果的类，然后尝试这个

$（ '礼'）。悬停（函数（）{
  $（本）.addClass（ “亮点”）;
}，函数（）{
  $（本）.removeClass（ “亮点”）;
  }）;
  。突出{   背景：＃222;   颜色：#fff;   }

使用jQuery将鼠标悬停在list元素上时显示高亮效果

3 个答案: