0

ダブルロールオーバーリンクを作ろうとしています。「写真」をロールオーバーするとき。「fotografie」を表示させて「grafisch」を非表示にしたいです (同じこと: grafisch をロールオーバーすると、「foto」が非表示になります)。opactiy を使用すると最も簡単であることがわかりましたが、コードがわかりません。

どんな助けでも大歓迎です。

HTML

<a class="fotografie" href="URL">
<div class="foto">foto</div>
<div class="fotografieh">fotografie</div>
</a><a class="grafischontwerp" href="URL2">
<div class="grafisch">grafisch</div>
<div class="grafischontwerph">grafisch ontwerp</div>
</a>

CSS

.masterplan .fotografie {color: #ff6666;}
.masterplan .fotografie .fotografieh { display: none; }
.masterplan .fotografie:hover .foto { display: none; }
.masterplan .fotografie:hover .fotografieh { display: inline;}
.masterplan .grafischontwerp {color: #33cccc; }
.masterplan .grafischontwerp .grafischontwerph { display: none; }
.masterplan .grafischontwerp:hover .grafisch { display: none; }
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}
4

1 に答える 1

1

CSS だけでは簡単な答えが見つからないため、単純な数行の jQuery を追加することをお勧めします。

$(document).ready(function() {

    $(".foto").hover( function() { // Assign 'hover' action to all elements with 'foto' class
        $(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class
    });
    $(".grafisch").hover( function() {
        $(".foto").toggle();
    });
    /* insert other jQuery code, if any */
    ...
});

jQuery を使用している場合は、お役に立てば幸いです。

編集：

マイケル、あなたは JavaScript/jQuery に慣れていないのではないかと思いました。ウェブ上には、簡単に見つけることができる例やチュートリアルがたくさんあります。また、必ず StackOverflow も検索してください。

html と css を引き続き使用する予定がある場合は、JavaScript と jQuery の背後にある基本的な概念を少なくとも学習することをお勧めします。これは、最も広く使用されている JavaScript フレームワーク/ライブラリの 1 つです。

開始するには、次のリンクを確認してください。

以前に書いたコードにいくつかのコメントも追加したことに注意してください。このトピックについて他にご不明な点がありましたらお知らせください。

このデモをチェックしてください --> DEMO

于 2013-10-13T15:31:16.030 に答える