3

「作業」リンクにマウスオーバーすると、このサイトのポップアップボックスをエミュレートしようとしています：http：//zooadvertising.com.au/

ポップアップとマウスオーバーの要素はうまく機能します。方法がわからないのは、ポップアップ要素内に複数の列を作成することだけです。その中に別のdivを追加して、2番目の列として右にフロートしようとすると、代わりにポップアップがさらに作成されます。このようなスタイルの要素内にdivをネストする方法はありますか？

編集されたフィドル：http：//jsfiddle.net/7ZE8q/6/

CSS：

<style type="text/css" title="">
.NameHighlights {
position:relative;
}
.NameHighlights div {
display: none;
}
.NameHighlightsHover {
position:relative;
}
.NameHighlightsHover div {
display:block;
position:absolute;
width: 400px;
height: 300px;
top:30px;
left:-300px;
z-index:1000;
background-color: #000000;
padding: 15px;
font-size: 14px;
color: white;
}
</style>
4

2 に答える 2

2

あなたがすべきことは次のようなものです：http：//jsfiddle.net/8X3uj/1/

HTML：

<div class="top_bar">
  <span>Work
    <div class="popup">
      <div class="column" style="background-color: red;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: green;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
      <div class="column" style="background-color: yellow;">
        <div class="left_column"></div>
        <div class="right_column"></div>
      </div>
    </div>
  </span>
</div>

CSS：

.top_bar{ background-color: lightgreen; }
.popup{ background-color: black; height: 500px; display: none; font-size: 0px; }
.popup:hover{ display: block; text-align: center; }
.top_bar > span:hover > div{ display: block; }
.column{ height: 400px; width: 33%; display: inline-block; margin: 0px 1px; }
.column > div{ width: 50%; height: 300px; display: inline-block; }
.column > div:first-child{ background-color: dodgerblue; }
.column > div:last-child{  background-color: gray; }
  1. ポップアップ自体の背景は黒です。
  2. ポップアップ内には、背景が赤、緑、黄色の3つのメイン列があります。
  3. 各列の内側には、背景が青と灰色のサブ列があります。

JSは必要ありません...HTMLとCSSだけで、：hoverとdisplay：inline-block;を使用します。

それが役に立てば幸い！

于 2013-03-25T00:51:39.287 に答える
2

これが私の解決策です：それはJSFiddleフォームにあります。お役に立てれば。基本的なスタイルを少し追加するためにブートストラップを使用しましたが、重要な部分はブートストラップを使用することではなく、使用されるjqueryです。

$(document).ready(function(){

        $('.nav3Hov').hide();
        $('#nav3').on('mouseover', function(){
            $('.nav3Hov').stop(true,true).fadeIn(200);
        }).on('mouseleave', function(){
            $('.nav3Hov').stop(true).delay(200).fadeOut(200);
        });      
        $('.nav3Hov').on('mouseenter', function(){
            $(this).stop(true).clearQueue().show();
        }).on('mouseleave', function() {
            $(this).delay(200).fadeOut(200);
        });
});

編集 ちなみに、あなたが提供したjsfiddleを使用しなかったことをお詫びします。あなたがそれを追加する前に私は答え始めました！：P

于 2013-03-25T01:02:19.637 に答える