問題得到簡單的jquery'懸停'工作

我有一個容器<div>我動態插入第三方內容，我無法控制，換句話說，我得到了我給。問題得到簡單的jquery'懸停'工作

如果第三方網站上的插入元素具有懸停狀態，我已經將該懸停顏色存儲爲十六進制顏色;我無法將其存儲爲樣式，因爲此顏色變量是動態更新的。

我想要做的就是將懸停顏色變量應用到位於我的容器內的元素。

如果我預先編寫了風格，我可以使它工作，但正如我所說，我不知道它提前，所以我不能這樣做。這個簡單的代碼確實可行，給鏈接一個橙色的懸停狀態。（見我working fiddle）：

<style> 
    .hovering, #container a:hover {color: orange;} 
</style> 
<script> 
    $('#container').hover(function() { 
     $(this).addClass('hovering'); 
    }, function() { 
     $(this).removeClass('hovering'); 
    }); 
</script> 

<div id="container"> 
    <a href="something"> 
     some link 
    </a>  
</div>

不過，我必須使用存儲懸停顏色可變hoverClass和應用它，但我不能得到它的工作。我試過這個，但它不起作用。（見the fiddle I'm trying to make work）：

<script> 
    var hoverClass = '.hovering, #container a:hover {color: orange;}'; 
    $('#container').hover(function() { 
     $(this).addClass(hoverClass); 
    }, function() { 
     $(this).removeClass(hoverClass); 
    }); 
</script> 
<div id="container"> 
    <a href="something"> 
     some link 
    </a>  
</div>

來源

2012-09-25 Steve

.hovering, #container a:hover {color: orange;}是不是一類，它的CSS規則。

如果您需要的顏色是一個變量，我建議改變爲以下內容：

<script> 
    var hoverColour = "orange"; 
    $('#container a').hover(function() { 
     $(this).css("color", hoverColour); 
    }, function() { 
     $(this).css("color", "auto"); 
    }); 
</script> 
<div id="container"> 
    <a href="something"> 
     some link 
    </a>  
</div>

或者，simplier解決辦法是使用添加樣式的jQuery：

$(function(){ 
    var hoverColor = "orange"; 
    $("head").append("<style type='text/css'>#container a:hover { color: " + hoverColor + "; }</style>"); 
});

-- WORKING FIDDLE --

來源

2012-09-25 15:04:28 Curt

你爲什麼會追加風格？爲什麼你不把它添加到HTML？ – CharliePrynn

感謝這個Curt – Steve

您試圖傳遞addClass css值。

addClass只是將類名添加到元素。您需要定義樣式表中css規則的作用。

像這樣。 http://jsfiddle.net/cKpLk/27/

例子：

<script> 
     var hoverClass = 'hovering'; 

     $('#container a').hover(function() { 
      $(this).addClass(hoverClass); 
     }, function() { 
      $(this).removeClass(hoverClass); 
     }); 
</script> 
<style> 
     .hovering, #container a:hover {color: orange;} 
</style> 
<div id="container"> 
    <a href="something"> 
     some link 
    </a>  
</div>

來源

2012-09-25 15:04:50 CharliePrynn

感謝這個查理，但是我不能預先定義CSS類中的'顏色'，因爲我事先不知道它 - 它必須來自保存它的變量 - 然後我需要將該顏色變量應用於相關元素 – Steve

啊，夠公平的。如果您在生成頁面之前知道顏色將作爲服務器端，您可以使用PHP輸出它。但我想其他解決方案更好， – CharliePrynn

var hovercolor = 'red'; 
$(function() { 
    $("#container a").hover(function() { 
     $("#container a").css('color', hovercolor); 
    }, function() { 
     $("#container a").css('color',''); 
    }); 
});

來源

2012-09-25 15:17:36 DiaMonD

我無法得到這個工作 - 我把一個jsfiddle嘗試 - http://jsfiddle.net/ArZyk/ – Steve

http://jsfiddle.net/vVjg4/2/確保你選擇左邊菜單中的jQuery框架 – DiaMonD

好了！我已將它添加到此處以幫助其他人 - http://jsfiddle.net/vVjg4/3/ – Steve

問題得到簡單的jquery'懸停'工作

回答

相關問題