Change one element when hover it

Question

So, my ex is : when hover one < li> , elements will be changed.

I have a html code with 3 < li> like that

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

And JQuery like that :

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

So when hover both 3 li change. But i just want only one that hoved . So, how should i use $(this) ?

Answer 1

Looks like your selectors are the problem, instead of targeting the elements from the hovered element, you are targeting all elements

$(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

Use find() to get the 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

Why not a Pure Css Solution

.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

I solved ur task here is the fiddle.. 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', '');
      });
    });