Question

我有以下HTML结构：

<ul>
    <li><a href><img src/></a></li>
    <li><a href><img src/></a></li>
    <li><a href><img src/></a></li>
</ul>

由于修复了一些CSS错误，我需要知道哪些图像链接是“鼠标悬停” 然后在Jquery脚本中我需要选择器，类似于

$('a img').mouseover(function(){
var imgElement = $(this);
if ('a img[3]') { // if the hovered link is the third
imgElement.animate({
                width: "315px",
                height: "225px",
                marginLeft: "-150px"
            }, 1500 );

问题是在这种情况下如何获得第二个或第三个“img”。

Answer 1

试试这个

$('a img').each(function(i){
 $(this).mouseover(function(){
    if (i == 2) { // if the hovered link is the third
      $(this).animate({
                width: "315px",
                height: "225px",
                marginLeft: "-150px"
            }, 1500 );
     }
  });
});

Answer 2

我会使用jquery的第n个子选择器http://api.jquery.com/nth-child-selector/

Answer 3

我不确定我是否正确地关注你。如果您想要第三个<li> <img>，则可以使用$('ul li:eq(2) a img')。

Answer 4

试试这个http://jsfiddle.net/pxfunc/M2KAF/

var $imgs = $('a img');
$imgs.mouseover(function() {
    var $that = $(this);
    if ($imgs.index($that) === 2) { // if the hovered link is the third
        $that.animate({
            width: "315px",
            height: "225px",
            marginLeft: "-150px"
        }, 1500);
    }
});

Jquery-CSS错误修复

4 个答案: