0

私は次のコードを持っています：

 <div class="outer-div">
     <img onmouseover="showDiv(this)" src="{{ STATIC_URL }}/images/user_male.png">
     <a onmouseout="hideDiv(this)" href="{% me.some_url %}" style="display: block;">
         <div class="inner-block" onmouseout="hideDiv(elem)">
             <h5>{{ me.title }}</h5>
             <p>{{ me.text }}</p>
             <p>about ? ago</p>
         </div>
     </a>
     <div>
            <p>Comments</p>
            <p>Likes</p>
    </div>
</div>



<script>
function showDiv(elem) {
    elem.style.visibility="hidden";
    elem.nextSibling.style.visibility="visibile";
}

function hideDiv(elem) {
    elem.style.visibility="hidden";
    elem.previousSibling.style.visibility="visibile";
}
</script>

div "inner-block"は、uをホバーしたときに画像の真上にくるように配置されます。したがって、リンクされた「内部ブロック」divをポップアップする画像にマウスオーバーを設定し、次にdivを非表示にして画像を再度表示するリンクにマウスオーバーを設定するというアイデアがあります。

elem.nextSiblingを使おうとすると、elem.nextSiblingが未定義であるというエラーが表示されるため、可視性を設定できません。ありがとう！あるいは、これを行う別の方法はありますか？ありがとう！

4

4 に答える 4

0

nextSiblingとpreviousSiblingは同じ親で動作しています<div class="inner-block" onmouseout="hideDiv(elem)">が、兄弟がいません

詳細： http ：//www.w3schools.com/dom/prop_node_nextsibling.asp

要素IDを設定し、兄弟の代わりにgetElementByIdを使用する方がよいと思います

于 2012-08-20T03:17:52.553 に答える
0

さて、私は問題を理解しました。elem.nextSibling と elem.previousSibling はどちらもテキスト ノードを返していました。

だから私は結局使った

elem.nextSibling.nextSibling

と

elem.previousSibling.previousSibling

ウーフー！常にデバッグ-

于 2012-08-21T18:10:31.567 に答える
0

ここに私の試みがあります：

        <div id="outer-div">
        <img id ="img" onmouseover="showDiv()" src="http://www.crunchbase.com/assets/images/resized/0004/1621/41621v6-max-250x250.jpg" style = "visibility:visible;"/>
        <div id="inner-block" onmouseout="hideDiv()" style="visibility:hidden;">
            <a href="http://www.stackoverflow.com" style="display: block;">
                 <div>
                     <h5>{{ me.title }}</h5>
                     <p>{{ me.text }}</p>
                     <p>about ? ago</p>
                 </div>
             </a>
        </div>
         <div>
                <p>Comments</p>
                <p>Likes</p>
        </div>
    </div>

そして、ここにJavaScriptがあります：

<script>
    function showDiv() {
        document.getElementById("img").style.visibility = "hidden";
        document.getElementById("inner-block").style.visibility = "visible";
    }

    function hideDiv() {
        document.getElementById("inner-block").style.visibility = "hidden";
        document.getElementById("img").style.visibility = "visible";
    }
</script>

いくつかのこと: 私が行った主な変更は、関数をアンカー タグに配置する代わりに、すべてを独自の div にカプセル化することでした。この場合はその周りのdivである特定の領域を指定すると、これははるかに優れていると思います。これは、リンクではなく特定のセクションなどにしたくない場合に、将来的にはより良いものになります.

また、document.getElementById も使用しました。私は、previousSibling と nextSibling でそれを行うことができると確信しています (未定義のエラーがあった理由については、まだちょっと混乱しているので、もっといじる必要があります) が、全体的には、とにかくこれがより良いスタイルだと思います. 常に要素の前に兄弟を取得し、要素の後に兄弟を取得したい場合を除き、この方法で行うことをお勧めします。どの要素を非表示にして再表示するかを指定する方が、はるかに整理されています。

現在、リンクは画像の真上にはありません。あなたがそれをしたいのであれば、絶対配置やフロートをいじって動作させることができると思いますが、自分で試してみましょう. お役に立てれば。

于 2012-08-20T09:24:51.963 に答える
0

わかりましたので、今私はエラーが発生していますUncaught ReferenceError: elem is not defined

最初に表示されるエラーは必ず修正してください。

私が得ることができる最も近いものは、この jsFiddleです。

誰でも私の答えに基づいて自由に構築してください。

于 2012-08-20T03:01:28.140 に答える