Question

所以，我的前任是：当悬停一个＆lt;李＆GT; ，元素将被改变。

我有一个3＆lt;的HTML代码李＆GT;像那样

<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）？

Answer 1

看起来你的选择器是问题，而不是从悬停元素中定位元素，你的目标是所有元素

$(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', '');
    });
});

Answer 2

使用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', '');
    });
});

Answer 3

为什么不使用Pure 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;
}

Live Demo

Answer 4

我在这里解决了你的任务是小提琴.. 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', '');
      });
    });

悬停时更改一个元素

4 个答案: