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

[英]Showing highlight effect when mouse hovered over list element by using jQuery


I have the following code:

我有以下代码:

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>

Basically what I want it to accomplish is to do the highlight effect (http://api.jqueryui.com/highlight-effect/) when the mouse is hovered over any of the list elements (Thing 1, Thing 2, Thing 3). For some reason this doesn't work the way I do it. Could someone explain me why this code doesn't work and how it should be done then?

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

3 个解决方案

#1


2  

You need to include the library for jQuery ui,

你需要为jQuery ui包含库,

Working example http://jsfiddle.net/vnfvcp5h/

工作示例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>

And you don't need to wrap your code in a function and call in on document ready, you can simply add the event listener

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

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

#2


1  

"highlight" effect requires jQuery UI to be loaded too.

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

Look at example at http://api.jqueryui.com/highlight-effect/

请看http://api.jqueryui.com/highlight-effect/上的示例

#3


1  

try some another way to highlight.
create a class in css which contains the effect of highlight you want and then try this

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

$('li').hover(function(){
    $(this).addClass("highlight");
},function(){
    $(this).removeClass("highlight");
});
.highlight{ background: #222; color: #fff; }

$('li')。hover(function(){$(this).addClass(“highlight”);},function(){$(this).removeClass(“highlight”);}); .highlight {background:#222;颜色:#fff; }

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.silva-art.net/blog/2014/09/29/605f3c6cfd4c688e9ce2f05cd48b5fe8.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告