0

<div>私は、制御できないサードパーティのコンテンツを動的に挿入するコンテナを持っています。つまり、与えられたものを取得します。

サードパーティの Web サイトに挿入された要素にホバー状態があった場合、そのホバー色を 16 進数の色として既に保存しています。この色変数は動的に更新されるため、スタイルとして保存できません。

私ができるようにしたいのは、そのホバーカラー変数を、コンテナー内に着陸した要素に適用することです。

事前にスタイルをコーディングしておけば動作させることはできますが、先ほども言ったように事前にわからないのでできません。この単純なコードは機能し、リンクにオレンジ色のホバー状態を与えます。（私の作業フィドルを参照してください。）：

<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適用する必要がありますが、機能させることができません。これを試しましたが、うまくいきません。(私が作ろうとしているフィドルを参照してください。):

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

3 に答える 3

4

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

または、jQuery を使用してスタイルを追加することも、より簡単な解決策です。

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

-- 働くフィドル --

于 2012-09-25T15:04:28.350 に答える
0 
    var hovercolor = 'red';
$(function() {
    $("#container a").hover(function() {
        $("#container a").css('color', hovercolor);
    }, function() {
        $("#container a").css('color','');
    });
});​
于 2012-09-25T15:17:36.183 に答える
0

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-25T15:04:50.323 に答える