Question

我有一个jQuery问题。 HTML：

<ul>
  <li>
    <a class="pfImg"></a>
    <div><a>Text1</a></div>
  </li>
  <li>
    <a class="pfImg"></a>
    <div><a>Text2</a></div>
  </li>
</ul>

在这个结构中，每个<li>都有一个网站的图片，当我将该图片悬停时，会出现一个div，其中包含一些专门为该网站编写的文本。 <li>具有指定的宽度，display: block; overflow: hidden;设置为它。当<li>展开时，应自动显示div。我用jQuery尝试过，但没找到合适的代码。

var $this = $(this); // EDIT: forgot I had created this variable.
$('.pfImg').hover(
  function() {
    $this.parent().animate({width: '300px'}, 'slow', 'swing');
  },
  function() {
    $this.parent().animate({width: '100px'}, 'slow', 'swing');
}); // end hover

提前致谢

- Seht

Answer 1

使用$(this)代替$this，您错过了()，需要使用next("div")

$('.pfImg').hover(function () {
    $(this).next("div").animate({
        width: '300px'
    }, 'slow', 'swing');
}, function () {
    $(this).next("div").animate({
        width: '100px'
    }, 'slow', 'swing');
}); // end hover

Answer 2

如果我正确理解了您的需求，可以像这样使用next()：

FIDDLE http://jsfiddle.net/5gVRS/

<强> JQUERY

$('.pfImg').hover(
    function () {
        $(this).next("div").animate({width: '300px'}, 'slow', 'swing');
    },
    function () {
        $(this).next("div").animate({width: '100px'}, 'slow', 'swing');
}); // end hover

查看here以更好地了解next()的工作原理

Answer 3

您需要将“this”放在括号中。

E.g $(this)。

或$(this).next(div)

你可以尝试一下。不确定哪种方式效果最佳。

jquery跟随标签选择器

3 个答案: