3

これは本当に単純なはずですが、私はこれが初めてで、物事を考えすぎていると思います. 別の要素がホバーされたときに要素を表示し、ユーザーがいずれかの上にマウスを置いた場合に表示したままにします。

これが私が始めていることです。要素が表示されていてホバーされているかどうかを示すifステートメントを作成しようとしましたが、表示されたままにしましたが、このフィドルで見られる動作は変わりませんでした。

この例では、ユーザーがマウスを動かしてクリックしようとしても、「私はリンクです」というテキストがそこにとどまるようにします。このようなSOに関する他の投稿を見つけましたが、私の質問を解決するために回答を適用できませんでした。

このページを見て、靴の上にカーソルを合わせると、私が達成しようとしている正確な効果を見ることができます. 製品情報が表示され、マウスを動かしてクリックできます。

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400);
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

私もこのようなことをしようとしましたが、うまくいきません:

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400).hover(function () {
        $('#example3-link1').show();
    }).mouseleave(function () {
        $('#example3-link1').hide();
    });
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

光を見せてください！

4

3 に答える 3

-2

そのためのスクリプトは必要ありません (ターゲット要素 [たとえば、表示する必要のある要素] がホバーされた要素から CSS セレクターで「選択」できる限り)。

つまり、ターゲット要素をホバーした要素にネストできるか、ホバーした要素がターゲットの前の兄弟であることを意味します)。それ以外の場合は、スクリプトを使用する必要があります。

このデモフィドルを見る

HTML

<div id="Hovered">Hover me</div>
<div id="Target">I'm the target</div>

CSS

#Target
{
    background-color: red;
    display: none;
}
#Hovered
{
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}
#Target:hover, #Hovered:hover + #Target
{
    display: block;
}

アップデート

いくつかの coll トランジションが必要な場合でも、純粋な CSS を介して行うことができます。この更新されたフィドルを参照してください。

于 2013-09-17T15:43:33.397 に答える