39

これまで実際に対処する必要がなかった小さな問題に直面しています。私は初心者の Web デザイナーで、最近、自分の Web ページの div で CSS ホバー機能を使用しました。この div にカーソルを合わせると、別の画像が表示されます。ただし、「ホバーを外す」と新しい画像が消えるので、表示したままにしたいと思います。

私が使用しているコードの例を次に示します。

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about:hover #onabout {
display: block;
}

CSSだけでこれを解決する方法はありますか？これまでJavaScriptを使用したことがなく、あまり快適ではありません。

いずれにせよ、どんな解決策も喜んで受け入れられます! 本当にありがとう。

4

11 に答える 11

13

CSS はタグ、クラス、ID、疑似クラス、および状態のスタイル設定に関するルールを定義するだけなので、CSS を使用してホバー状態を永続的に維持することはできません。残念ながら、問題を解決するには Javascript が必要です。

jQuery ライブラリ(hehehe)のファンであるため、これが私の解決策です。

CSS

ul li ul {
    display: none;
}
ul li.permahover ul {
    display: block;
}

jQueryを使ったJavascript

$("#onabout").one("mouseover", function() {
  $("#onabout").addClass('permahover');
});

oneイベントは、要素のイベントにハンドラーをアタッチします。ハンドラは要素ごとに最大1 回実行されます。

デモ

http://jsfiddle.net/jlratwil/w83BW/

于 2013-06-14T02:44:31.630 に答える
6

これは JavaScript で行う必要があります。jquery を使用すると、次のようにスタイルを永続的に追加できます。

$(#onabout).onmouseover().css("display","block");
于 2013-06-14T02:38:40.590 に答える
4

いくつかの純粋な CSS のアイデア

「見えるままにする」というのが何を意図しているのかよくわかりません。考えられる目的に基づいていくつかの異なる考えを次に示しますが、それぞれに意図しない副作用が生じる可能性があります. 唯一の純粋に永続的な解決策は、javascript を使用することです (他の人が指摘しているように)。

より長く「滞在」しますが、それでも永続的ではありません

表示された画像自体にカーソルを合わせている限り、表示され続けることを意味する場合は、コードを簡単に変更するだけで機能します。

#about:hover #onabout,
#onabout:hover {
   display: block;
}

永続的な「滞在」

ホバーでも#onabout表示されるposition: fixedラッパーでラップし、そのラッパーを画面の上部、右側、下部、左側に固定するように設定すると、そのラッパーを使用して永続的に保持されます。ただし、固定位置関係にもなり、他のホバーイベントやクリックが妨げられる場合があります。それはおそらく望ましくありませんが、繰り返しになりますが、私はあなたの特定のアプリケーションを知りません。そのため、アイデアがうまくいく可能性があります. 実際にはをデフォルトとして設定し、ラッパーで非表示にします。ラッパーとホバーのコードは次のようになります。:hover#onaboutdisplay: block#onabout

#permaHoverWrap {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
}

#about:hover #permaHoverWrap,
#permaHoverWrap:hover {
   display: block;
}

#onaboutはこのソリューションに含まれているため#permaHoverWrap、固定ラッパーの表示を通して表示され、そのラッパーのホバーが保証されている間はそのままになります。繰り返しますが、この解決策の副作用は、適切な状況下でない限り深刻すぎる可能性があります。ただし、概念実証として、純粋に CSS を介して行うことができます。

于 2013-06-14T04:13:28.967 に答える
1

最良の解決策は、このような要素にクラスを追加または削除することです（JQUERYで実行）

#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}

#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}

#about.hover #onabout {
display: block;
}

:hover を .hover(Class Name) に変更したことに注意してください

$("#about").hover(function(){
   $(this).addClass("hover");
});
于 2013-06-14T03:06:21.660 に答える
1

純粋なcssに依存している場合、:hoverでこれを行う可能性はないと思います。css の使用に固執する場合は、クリックに変更することもできます。ユーザーが div をクリックすると、もう一方の div が永続的に表示されるようにします。このような：

<style>
.onabout
{
    display: none;
}

input#activate
{
    display: none;
}

input#activate:checked + .onabout
{
    display: block;
}
</style>

<label for="activate">
    <div class="about">Click me</div>
</label>
<input id="activate" type="checkbox"></input>
<div class="onabout">Visible while checkbox:checked true or Radiobutton:checked true</div>

チェックボックスをオンにすると、クリックして離すことができます。したくない場合は、入力タイプをラジオにチェックしてください。

于 2013-11-12T14:15:11.050 に答える