0

所以，我的前任是：当悬停一个 <li> 时，元素将被更改。

我有一个带有 3 < li> 的 html 代码

<li>
                        <a href="#" title="Tall Glow">
                        <div class="one-pro">
                            <img src="images/1.jpg" />
                            <div class="one-info">
                                <p class="title">
                                Nokia Lumia 920
                                </p>
                                <p class="old-price">
                                9.200.000 VND
                                </p>
                                <p class="new-price">
                                8.000.000 VND
                                </p>
                                <div class="ct">
                                <p><a href="#">Chi tiết</a></p>
                                </div><!-- end .ct -->
                            </div><!-- end .one-info -->
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Tall Glow">
                        <div class="one-pro">
                            <img src="images/2.jpg" />
                            <div class="one-info">
                                <p class="title">
                                Nokia Lumia 920
                                </p>
                                <p class="old-price">
                                9.200.000 VND
                                </p>
                                <p class="new-price">
                                8.000.000 VND
                                </p>
                                <div class="ct">
                                <p><a href="#">Chi tiết</a></p>
                                </div><!-- end .ct -->
                            </div><!-- end .one-info -->
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Tall Glow">
                        <div class="one-pro">
                            <img src="images/3.jpg" />
                            <div class="one-info">
                                <p class="title">
                                Nokia Lumia 920
                                </p>
                                <p class="old-price">
                                9.200.000 VND
                                </p>
                                <p class="new-price">
                                8.000.000 VND
                                </p>
                                <div class="ct">
                                <p><a href="#">Chi tiết</a></p>
                                </div><!-- end .ct -->
                            </div><!-- end .one-info -->
                        </div>
                        </a>
                    </li>

像这样的JQuery：

$(function() {
      $('.one-pro').hover(function() {
        $('.one-info').css('background-color', '#0057c1');
        $(this).css('border', '1px solid #0057c1');
        $('.title').css('color', '#FFFFFF');
        $('.old-price').css('color', '#FFFFFF');
        $('.new-price').css('color', '#ffef38');
        $('.ct').css('background-color', '#ffef38');
        $('.ct p a').css('color', '#000000');
      }, function() {
        // on mouseout, reset the background colour
        $('.one-info').css('background-color', '');
        $(this).css('border', '');
        $('.title').css('color', '');
        $('.old-price').css('color', '');
        $('.new-price').css('color', '');
        $('.ct').css('background-color', '');
        $('.ct p a').css('color', '');
      });
    });

因此，当悬停时，两个 3 li 都会发生变化。但我只想要一个徘徊的。那么，我应该如何使用 $(this) ？

4

4 回答 4

0

使用find()获取children element

$(function() {
     $('.one-pro').hover(function() {
        $this=$(this);
        $this.find('.one-info').css('background-color', '#0057c1');
        $(this).css('border', '1px solid #0057c1');
        $this.find('.title').css('color', '#FFFFFF');
        $this.find('.old-price').css('color', '#FFFFFF');
        $this.find('.new-price').css('color', '#ffef38');
        $this.find('.ct').css('background-color', '#ffef38');
        $this.find('.ct p a').css('color', '#000000');
      }, function() {
        // on mouseout, reset the background colour
        $this.find('.one-info').css('background-color', '');
        $(this).css('border', '');
        $this.find('.title').css('color', '');
        $this.find('.old-price').css('color', '');
        $this.find('.new-price').css('color', '');
        $this.find('.ct').css('background-color', '');
        $this.find('.ct p a').css('color', '');
    });
});
于 2013-10-30T04:30:03.153 回答
0

为什么不是纯 CSS 解决方案

.one-pro:hover
{
    border: 1px solid #0057c1
}
.one-pro:hover .one-info
{
    background-color:#0057c1;
}
.one-pro:hover .title
{
    color:#FFFFFF;
}
.one-pro:hover .old-price
{
    color:#FFFFFF;
}
.one-pro:hover .new-price
{
    color:#ffef38;
}
.one-pro:hover .ct
{
    background-color:#ffef38;
}
.one-pro:hover .ct p a
{
    color:#000000;
}

现场演示

于 2013-10-30T04:31:22.207 回答
0

看起来您的选择器是问题所在，而不是定位悬停元素中的元素，而是定位所有元素

$(function () {
    $('.one-pro').hover(function () {
        var $this = $(this);
        $this.css('background-color', '#0057c1');
        $this.css('border', '1px solid #0057c1');
        $this.find('.title').css('color', '#FFFFFF');
        $this.find('.old-price').css('color', '#FFFFFF');
        $this.find('.new-price').css('color', '#ffef38');
        $this.find('.ct').css('background-color', '#ffef38');
        $this.find('.ct p a').css('color', '#000000');
    }, function () {
        var $this = $(this);
        // on mouseout, reset the background colour
        $this.css('background-color', '');
        $this.css('border', '');
        $this.find('.title').css('color', '');
        $this.find('.old-price').css('color', '');
        $this.find('.new-price').css('color', '');
        $this.find('.ct').css('background-color', '');
        $this.find('.ct p a').css('color', '');
    });
});
于 2013-10-30T04:28:16.427 回答
0

我在这里解决了你的任务是小提琴.. http://jsbin.com/EFuHOwI/1/edit

$(function() {
      $('.one-pro').hover(function() {
        $(this).css('background-color', '#0057c1');
        $(this).css('border', '1px solid #0057c1');
         $(this).find('.title').css('color', '#FFFFFF');
        $(this).find('.old-price').css('color', '#FFFFFF');
        $(this).find('.new-price').css('color', '#ffef38');
        $(this).find('.ct').css('background-color', '#ffef38');
        $('.ct p a').css('color', '#000000');
      }, function() {
        // on mouseout, reset the background colour
         $(this).css('background-color', '');
        $(this).css('border', '');
        $(this).find('.title').css('color', '');
        $(this).find('.old-price').css('color', '');
        $(this).find('.new-price').css('color', '');
        $(this).find('.ct').css('background-color', '');
        $(this).find('.ct p a').css('color', '');
      });
    });
于 2013-10-30T04:32:28.377 回答