Jquery 相同class div 怎么判断鼠标经过哪个并显示里面的隐藏层
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 相同class div 怎么判断鼠标经过哪个并显示里面的隐藏层相关的知识，希望对你有一定的参考价值。
<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>
<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>
<div class="address"><div class="con"><div class="addr-action"><a class="addr-edit">编辑</a><a class="addr-delete">删除</a></div></div></div>
class="addr-action"默认是隐藏的
鼠标经过 class="address" 显示这个DIV下面的 class="addr-action"层
Jquery要怎么写
思路：使用hover()函数监测鼠标经过事件，在hover()的处理函数内$(this)即表示当前处理的对象，也就是当前鼠标经过的class。然后使用toggle()函数实现内层元素在显示和隐藏之间切换。核心代码示例：
$("div.outer").hover(function()
$(this).find(".inner").toggle(); //
, function()
$(this).find(".inner").toggle();
);
下面进行一个实例演示:
1、html结构
<div class="outer"><div class="inner">我是隐藏1</div></div>
<div class="outer"><div class="inner">我是隐藏2</div></div>
2、jquery代码
$(function()
$("div.inner").hide(); // 默认隐藏所有内层元素
$("div.outer").hover(function() // 鼠标经过事件
$(this).find(".inner").toggle(); // 切换显示和隐藏
, function()
$(this).find(".inner").toggle(); // 切换显示和隐藏
);
);
3、效果演示
$(this).find(".addr-action").show();
); 参考技术B <script>
jQuery(function()
$(".address").hover(function()
$(this).find(".addr-action").toggle();
,function()
$(this).find(".addr-action").toggle();
);
);
</script> 参考技术C $('.address').hover(function()
$(this).find('.addr-action').show();
)本回答被提问者采纳
jquery判断是不是添加样式
html:<ul>
<li>第一行<div class="hover">sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
要求：鼠标经过时li添加背景色，离开时删除背景色，如果li的class=“hover”是显示的，则鼠标经过时li不添加背景色。。。请问用jquery怎么做，O(∩_∩)O谢谢
可以看下面的例子
1.定义了!important的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC !important;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
2.不定义!important的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
//if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html>
3.加判断的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor
background-color:#00CCCC;
.hover
background-color:#FF6600;
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$("ul li").hover(
function ()
if (!$(this).hasClass("hover"))
$(this).addClass("backcolor");
,
function ()
$(this).removeClass("backcolor");
);
);
</script>
<body>
<ul>
<li class="hover">第一<div>行sdsdsd</div></li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html> 参考技术A <ul id="tabfirst">
<li class="hover">第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
$("#tabfirst li").each(function(index)
$(this).mouseover(function() $(this).removeClass("hover");
$(this).addClass("hover");
);
);
我没验证，用法是大概是这样，具体你自个看下吧，应该不还要用到mouseout方法，鼠标移出时 参考技术B 用jquery的hover(over,out)事件
$("ul>li").hover(
function()
if($(this).attr("class")!="hover")
$(this).css("background-color","#FF0000");
,
function()
if($(this).attr("class")!="hover")
$(this).css("background-color","#FFFFFF");
); 参考技术C 查下 api撒
以上是关于Jquery 相同class div 怎么判断鼠标经过哪个并显示里面的隐藏层的主要内容，如果未能解决你的问题，请参考以下文章
我有3个DIV，Class相同，怎么用Jquery获取到第三个DIV？
jquery怎么获取下一个具有指定样式（class）的元素呢？
怎么使用jquery判断一个元素是否含有一个指定的类（class）