用jquery获取被hover的那个元素的id
我想做成hover一个元素就改变它里面的一个元素的宽度比如：<divid="a"style="backruound:#ddeeff;width150px;height:1...
我想做成hover一个元素就改变它里面的一个元素的宽度
比如：
<div id="a" style="backruound:#ddeeff;width150px;height:150px;>
<div id="b" style="backruound:#000;width100px;height:100px;"></div>
</div>
当鼠标悬停在#a这个div上面时，改变#b这个div的宽度，当鼠标移开时，宽度恢复为100px。
要怎么做？
这样的div有12个，我不想重复写12段代码，要用变量获取被hover的div的id，然后改变对应的子div的宽度 展开
比如：
<div id="a" style="backruound:#ddeeff;width150px;height:150px;>
<div id="b" style="backruound:#000;width100px;height:100px;"></div>
</div>
当鼠标悬停在#a这个div上面时，改变#b这个div的宽度，当鼠标移开时，宽度恢复为100px。
要怎么做？
这样的div有12个，我不想重复写12段代码，要用变量获取被hover的div的id，然后改变对应的子div的宽度 展开
2个回答
展开全部
你好，直接上代码，在Chrome里测试没有问题。别的浏览器没有测试哦。
希望我的回答帮你有帮助。
<!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>
<style>.tabw td{width:auto;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$("#a").mouseover(function(){
var divbH = $(this).css("height");
$("#b").css("height",divbH);
})
$("#a").mouseout(function(){
$("#b").css("height","100px");
})
});
</script>
</head>
<body>
<div id="a" style="background:#ddeeff;width:150px;height:150px;">
<div id="b" style="background:#000;width:100px;height:100px;"></div>
</div>
</body>
</html>
希望我的回答帮你有帮助。
<!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>
<style>.tabw td{width:auto;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$("#a").mouseover(function(){
var divbH = $(this).css("height");
$("#b").css("height",divbH);
})
$("#a").mouseout(function(){
$("#b").css("height","100px");
})
});
</script>
</head>
<body>
<div id="a" style="background:#ddeeff;width:150px;height:150px;">
<div id="b" style="background:#000;width:100px;height:100px;"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你写的css有错
需要引入jquery，把src改成你对应的路径。
这个可以通过获取class来做，可以批量操作，我写了demo，你运行下就知道了。好用的话，选我为满意答案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>t</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/.css" />
<script src="../jquery.js"></script>
</head>
<body>
<div id="a" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="b" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="aa" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="ba" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="ad" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="bf" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="adf" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="dfb" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<script>
$(function(){
$('.hover').hover(function(){
$(this).find('.hover_in').css('width','140px');
},function(){
$(this).find('.hover_in').css('width','100px');
})
})
</script>
</body>
</html>
需要引入jquery，把src改成你对应的路径。
这个可以通过获取class来做，可以批量操作，我写了demo，你运行下就知道了。好用的话，选我为满意答案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>t</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" href="css/.css" />
<script src="../jquery.js"></script>
</head>
<body>
<div id="a" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="b" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="aa" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="ba" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="ad" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="bf" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<br>
<div id="adf" class="hover" style="background:#f00;width:150px;height:150px;">a
<div id="dfb" class="hover_in" style="background:#f60;width:100px;height:100px;">b</div>
</div>
<script>
$(function(){
$('.hover').hover(function(){
$(this).find('.hover_in').css('width','140px');
},function(){
$(this).find('.hover_in').css('width','100px');
})
})
</script>
</body>
</html>
追问
那假如我把
$(this).find('.hover_in').css('width','140px');
写成：
$(this).find('.hover_in').animate({width:"140px"},"fast");
这样可以的吗？
追答
可以的，我试了你的代码，有动画效果。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
