1

この問題の解決策を見つけるのに苦労しています。マウスオーバーで特定の CSS 要素を好きな色にしたり、別の色に変更しborder-colorたりしようとしています。aiframe の制限を回避し、境界外のコードを変更するために DOM を使用しています。これまでの私のコードは次のとおりです。 

<script type="text/javascript">
window.parent.document.getElementById("screenshots").style.backgroundImage="url(bg.png)";
window.parent.document.getElementById("screenshots").style.color="#000";    
window.parent.document.getElementById("description_container").style.marginBottom="-4px";

$(window.parent.document.getElementById("screenshots")).children("a").each(function (i, o) {         
    $(o).children("img").each(function (i, img) {
        $(img).css({
        /*  "border": "5px", */
            "border-color": "rgba(119, 94, 4, .75)",
            "border-style": "solid",
            "border-radius": "10px",
            "opacity": "0.9",
        });
    });
});

たとえば"border-color": "rgba(119, 94, 4, .75)",、ホバー時に色を変更したいと言っているところです。

ありがとう！

4

3 に答える 3

1

これを JavaScript に依存するのはあまり好きではありません。実行時に、実装したいすべてのルールを含むスタイルシートをターゲット ドキュメントに追加できます。

$(window.parent.document.head).append('<style type="text/css">a:hover{color:red !important;}</style>');

アップデート：

クロスドメインの制限により、jsfiddle でこれを再現するのに苦労しています。 動作中のデモは、別のフィドルを独自の iframe に含めることによるクロスドメインの制限の影響を受けません。

于 2012-08-14T07:19:31.417 に答える
0

エリック・インが言及したように：

マウスオーバー イベントを特定の要素にバインドするか、html の要素で宣言することができます。すべての要素に対するこの同じループで、onmouseover イベントを各要素にバインドします。この構文はかなり紛らわしいか、jQuery に慣れていないだけです。jsでスタイルを設定することはこれにアプローチする良い方法ではないので、これを演習として行っていただければ幸いです。こんな感じでしょうか。

$(img).onmouseover = function() { 
    this.css( {
        "border-color": "rgba(119, 94, 4, .75)"
    });
};

jQuery .hover は、2 つの関数をバインドして切り替えることができるため、おそらくより良い選択です。これにより、境界線をリセットするために onmouseout もバインドする必要があるでしょう。

正直なところ、 css :hover クラスを使用することが最善かつ最も効率的なソリューションです。

于 2012-08-14T08:18:50.410 に答える
-1

編集：フィドル（および以下のコード）を編集しました。クラスは、要素を変更するかどうかを定義します。

これは、jQueryドキュメントからほぼ直接のjQueryソリューションのフィドルです。

コード：

$(".change").hover(function () {
  $(this).css({
    "border-color": "rgba(88, 44, 4, .75)",
    "border-radius": "10px",
    "opacity": "0.5"});
  }, function () {
var cssObj = {
    "border": "5px",
    "border-color": "rgba(119, 94, 4, .75)",
    "border-style": "solid",
    "border-radius": "10px",
    "opacity": "0.9"
}
  $(this).css(cssObj);
});

</ p>

于 2012-08-14T08:02:37.930 に答える