我如何能夠讓另一個元素的鼠標懸停文字發光（無文字陰影）

Question

例如說我有以下代碼：

HTML：

<ul> 
    <li> 
     <a> 
      <span class="title">Home</span> 
      <span class="description">My House</span> 
     </a> 
    </li> 
    <li> 
     <a> 
      <span class="title">About</span> 
      <span class="description">Foo</span> 
     </a> 
    </li> 
</ul> 

我怎麼能做出只有標題類發光，就像李元素懸停時發出的外光效果一樣。

我發現這個插件： http://nakajima.github.com/jquery-glow/ ，但我不知道如何使它符合我的需求。編輯：這是不是真的，我正在尋找，因爲它依靠文字陰影。

我想這在ie7 +中工作，因此我不能真正使用文字陰影。 <

Answer 1

代碼（您發佈的鏈接），你感興趣的一點是：

$(this).animate({ 
     color: TO_GLOW_TEXT_COLOR, 
     textShadow: { 
      begin: true, 
      color: TO_GLOW_HALO_COLOR, 
      radius: GLOW_RADIUS 
     } 
     }, DURATION); 

這使得文本的光芒。 （改變大寫字母）。這使得它再次消失：

$(this).animate({ 
     color: ORIGINAL_COLOR, 
     textShadow: { 
      begin: false, 
      color: TO_GLOW_HALO_COLOR, 
      radius: GLOW_RADIUS 
     } 
     }, DURATION); 

所以，你可以做這些鏈接正常懸停（）現在你知道了這個祕密：（這將測試懸停在a元素和ONLY煥發出span.title元素）。

$('ul li a').hover(function(){ 
    $(this).find('span.title').animate({.....}); // fade in 
}, 
function(){ 
    $(this).find('span.title').animate({.....}); // fade out 
}); 

問題 - 所有做的是設置使用jQuery而不是CSS的textShadow，所以因此這不會在IE7中工作，如果textShadow不起作用。

PS：你發佈的鏈接不能在Firefox中工作 - 除非我的Firefox被破壞。

Answer 2

$("li").hover(function() 
{ 
    //mouse over 
    var s = $(this).children("a").children("span"); 

    for(element in s) 
    { 
     if(element.hasClass("title")) 
     { 
      //add glow to element 
     } 
    } 
}, 
function() 
{ 
    //remove glow here in a similar way 
}); 

還要注意的是，如果您的標記是一致的，那麼你可以直接選擇，而不是通過所有這些循環的第一個元素，所以你會簡單地添加輝光到S [0]

我想找到可能甚至更適合您的目的而不是鏈接children（）調用。 http://api.jquery.com/find/

Answer 3

你問「我該如何讓事情發光？」還是你問：「我如何將光芒瞄準我想要的元素？」

如果你想後我會做這種方式：

$(document).ready(function(){ 
     $('li').hover(
      function(){ 
       $(this).find('.title').addClass('glow'); 
      },function(){ 
       $(this).find('.title').removeClass('glow'); 
      } 
     ); 
}); 

。假定加入了「光暈」級足以使標題元素的光芒。