徘徊時更改一個元素

因此，我的前任是：當懸停一個< li>時，元素將被更改。徘徊時更改一個元素

我有3 <李一的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華里的變化。但我只希望只有一個喜歡。那麼，我應該如何使用$（this）？

來源

2013-10-30 Vô Tình

這裏是一個小提琴可能是烏爾task..http有用：//jsbin.com/iNIvugE/2/edit – codebreaker

看起來你的選擇是問題，而不是針對從懸停的元素中的元素，你的目標的所有元素

$(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-30 04:28:16

使用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-30 04:30:03

爲什麼不純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

來源

2013-10-30 04:31:22 Rex

我解決這裏烏爾任務是小提琴.. 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-30 04:32:28 codebreaker

徘徊時更改一個元素

回答

相關問題