0

現在、楕円形に配置されているDIVがいくつかあります。各divは「サービス」を表し、それに応じてIDが付けられます。したがって、すべてが絶対位置で設定されます。

私がやりたいのは、divのマウスオーバーです。中央に、関連情報が表示された新しいDIVを表示します。これは「サービス」ごとに発生する必要があるため、各「説明」divはマウスオーバーするまで非表示になりますが、すべて同じスペースに表示されます。

問題のウェブサイトはwww.faa.net.auのホームページです。

この新しい説明的なDIVをマウスオーバーで表示し、マウスアウトで非表示にするにはどうすればよいですか？

4

3 に答える 3

2

あなたができることは、CSSを使ってそれらのすべてのdivを中央のその場所に配置することです。それらはスタックすることができ、一度に1つしか表示されないため、z-indexは重要ではありません。次に、CSSで「display：none」を使用してそれらを非表示にします。

次に、jQueryの.hover（）メソッドを使用して、マウスオーバー時に適切なdivを表示します。

$("#idOftheDivYouHoverOn").hover(function (e) {
     //This funciton defines what happens on mouse-in or hover.

     $("#idOfTheDefaultCenterDiv").hide();
     $("#idOfTheDivYouWantedToShow").show();


}, function (e) {
    //This function defines what happens on mouse-out or when the hover is over.
    $("#idOfTheDefaultCenterDiv").show();
     $("#idOfTheDivYouWantedToShow").hide();

});

ホバーするたびにこれを行う必要があります。「よりスマートな」方法がありますが、それを説明するのは非常に長い答えになります。

つまり、他の回答に見られるような単なるCSSではなく、JavaScript/jQueryを使用してこれを実行したい場合です。このメソッドを使用すると、フェード効果を追加できます-jQueryのホバーを見てください-http://api.jquery.com/hover/

編集：これが実際の例です：http：//jsfiddle.net/6dMDS/

お役に立てば幸いです。

于 2012-10-23T01:54:17.013 に答える
0

別のフォーラムの友人が、これを行う別の方法を投稿しました。CSS3のみであるため、一部のブラウザ（および間違いなく古いIE）はCSS3をサポートしないことに注意してください。

<div class="container">

<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />


<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>

</div>

* {margin: 0; padding: 0;}

.container {width: 400px;}

.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}


.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}

http://codepen.io/anon/pen/LbfCl

于 2012-10-23T16:10:50.050 に答える
-1

ですから、私がそれを正しく理解すれば、あなたは「サービス」DIVと「記述的」DIVを手に入れました。それを実現するためにいくつかのCSSを試してください。

HTML：

<div id="service"></div>
<div id="descriptive"></div>

そしてCSS：

#descriptive
{
visibility:hidden;
}

#service:hover #descriptive
{
visibility:visible;
}

基本的に、これにより、がホバーid="descriptive"されたときにDIVが表示されid="service"ます。

于 2012-10-23T01:54:12.897 に答える