0

我是这个 .Net 的新手，我需要div id动态地将其设置为变量并稍后在悬停时使用它。

在我的例子中，我有 4 个div元素，即div1, div2, div3,div4在这些 div 中我有四个 idpic1为 , pic2, pic3,的图像pic4。因此，当我将鼠标悬停在其中任何一个上时，该 div 内的图像应该动画。

悬停时如何获取变量中的 div id 并使用它来为特定图像设置动画。

这是我到目前为止尝试过的代码：

$(document).ready(function() { 
    $("#div1").hover(function() { 
        $("#pic1").animate({ width: '150px', height: '150px' }); 
    }); 
    $("#div2").hover(function() { 
        $("#pic2").animate({ width: '150px', height: '150px' }); 
    }); 
});

请任何人都可以帮助我找到解决方案。

4

5 回答 5

1

试试这个

function onover()
{

  var divid = $(this).parent().attr("id");
  // divid is the id of the div

}

在图片的鼠标悬停事件上调用此函数并执行任何操作

于 2013-09-02T10:03:23.670 回答
1

如果图像在您想要侦听鼠标悬停事件的 div 中，您可以find()在 jQuery 中调用元素子元素。例子：

HTML

<div id="div1" class="imagecontainer">
    <img id="pic1" src="http://foo.com/bar.png" />
</div>
<div id="div2" class="imagecontainer">
    <img id="pic2" src="http://foo.com/bar2.png" />
</div>

JavaScript/jQuery：

$(".imagecontainer").mouseover(function(event) {
    $(this).find("img").animate(/*animation here*/);
});

问候

于 2013-09-02T10:04:11.213 回答
1

html代码

<ul>
<li id="1"></li>    
<li id="2"></li>
<li id="3"></li>
<li id="4"></li>    
<li id="5"></li>
<li id="6"></li>
<ul>

jQuery代码是

<script type="text/javascript" >
$('li').mouseover(function(){
divId = $(this).attr('id');
$("#pic"+divId).animate({ width: '150px', height: '150px' }); 
});
</script>
于 2014-02-17T16:17:14.367 回答
0 
$('div').mouseover(function() {
var id = $(this).attr("id");
$("pic"+id).animate(do your stuff here);
});
于 2013-09-02T10:05:57.487 回答
0 
$('div').hover(function(){
  $('#'+this.id).children("img").animate({/*animation options*/});
});
于 2013-09-02T10:06:33.677 回答