0

私のウェブサイトでは、ユーザーがマウスを上に移動したときに div のいくつかのスタイル プロパティを変更したいと考えています。また、この div のいくつかの子要素を非表示/表示したいと思います。私は JavaScript の経験がありません。インターネットで見つけたコードを試しています。

私のdivが次のようになっているとしましょう：

<div class="Advertisement">
    <h2 class="Title">title</h2>
</div>

そして、マウスをdivの上に移動した後、このh2要素を非表示にしたいと思います。私の JS スクリプトは次のようになります。

window.onload = function() {
    var lis = document.getElementsByClassName("Advertisement");
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.style.backgroundColor = "green";
            this.style.width = "800px";
            var children = lis[i].childNodes.getElementsByClassName("Title");
            for (var j = 0; j < children.length; j++) {
                children[j].onmouseover = function() {
                    this.style.visibility = "hidden";
                };
            }
        };
    }
};​

サイズと背景色の変更は正常に機能しますが、「h2」要素は消えません。私は何を間違えましたか？

4

2 に答える 2

1

実際、そのタスクにはJavaScriptは必要ありません。プレーンなHTML/CSSを使用してみませんか？

これを試して：

<style>
    div.advertisement:hover > h2, div.advertisement:focus > h2 {
        color:      red;
    }
    div.advertisement > h3 {
        display:    none;
    }
    div.advertisement:hover > h3, div.advertisement:focus > h3 {
        display:    block;
    }
</style>

<div class="advertisement" tabindex="-1">
    <h2>title</h2>
    <h3>hidden text</h3>
</div>

これは実際に何かを示していますが、もちろん、h2を非表示にするとその逆に機能します。

RyanBによる拡張

これは私が与える答えに似ています。隠されたテキストは、より良いセマンティクスを持つために<p>, <span> or a <div>対である必要があります。また、それが重要な場合は、divに<h3>追加します。tabindex="-1"追加tabindex="-1"すると、<div>フォーカスを受け取ることができます。

于 2012-06-15T15:31:38.923 に答える
0

lis [i]はここでは定義されておらず、子ノードは必要ありません。したがって、これの代わりに

var children = lis[i].childNodes.getElementsByClassName("Title");

書く

 var children = this.getElementsByClassName("Title");
于 2012-06-15T15:27:58.527 に答える