用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的宽度展开

 我来答

2个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

爱你暖手
2012-08-03 · TA获得超过281个赞

知道小有建树答主

回答量：193

采纳率：100%

帮助的人：122万

我也去答题访问个人页

关注

展开全部

你好，直接上代码，在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>

已赞过 已踩过<

评论收起

LeeCan_Zeng
推荐于2017-11-25 · TA获得超过1998个赞

知道小有建树答主

回答量：691

采纳率：50%

帮助的人：207万

我也去答题访问个人页

关注

展开全部

你写的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>

追问

那假如我把
$(this).find('.hover_in').css('width','140px');

写成：
$(this).find('.hover_in').animate({width:"140px"},"fast");

这样可以的吗？

追答

可以的，我试了你的代码，有动画效果。

本回答被提问者采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用jquery获取被hover的那个元素的id

其他类似问题

为你推荐：