div要素を別の場所と同じ場所に配置する方法は？ （1つは隠され、アクションによってトグルされます）

Question

クリックしたときにフェードアウトしてテキストが表示されるようにしたいのです。今私ができることは、htmlファイル内のどこに要素を移動するかによって、画像の上または下にテキストを表示させることだけです。

私がこれを理解することができるのであれば、テキスト表示：なしと画像表示：ブロックを作成し、画像をクリック/テキストdivをクリックする操作でトグルさせることです。

これが意味をなさない場合は、私は明確にしようとすることができます。

無料のコードキャンプのために私の "トリビュートページ"に取り組んでいます。これは要件ではなく、私が達成したいと思う余分なものです。私の主なイメージが消えるようにして、 "仕事の歴史とPythonのタイムライン"のリストアイテムを表示することです。すべてが私のコードペンのリンクの下にコメントされています。質問では最後の二つのdiv要素「メイン画像」と「ジョブ履歴やPythonのタイムライン」

Here is a link to my code pen

<!-- job history and Python timeline --> 
<div id="history-timeline" class="text-center" style="display:show; inline"> 

    <p> 
    <ul> 
     <li> 
     <li> 
      <li> 
      <li> 
</div> 

Answer 1

は、それが外となりますので、自分のイメージにposition:absoluteを追加しますページフローのimgはh2以上に重なって表示されます。これでクリック時に画像を非表示にすることができます。 divのhoverにdisplay:noneを使用しました。あなたの親のdivの高さが画像の高さに一致していることを確認してください。

.hide_on_hover{ 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.hide_on_hover img{ 
 
    position:absolute; 
 
} 
 
.hide_on_hover:hover img{ 
 
    display:none; 
 
}

<div id="main-image-div" class="text-center hide_on_hover"> 
 
    <img 
 
     id="main-image" 
 
     src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" 
 

 
     class="rounded img-thumbnail " width="200" height="200"> 
 

 
    <!-- job history and Python timeline --> 
 

 
    <h2 id="history-timeline">does this work</h2> 
 
     
 
    </div>

Answer 2

これは容易な位置決め及びz索引付けを調整することによって達成することができます。

親div要素にはposition: relative属性が必要です。テキストにはposition: absoluteという属性が必要です。これにより、テキストがイメージと重なり合うことができます。位置の相対値は、子要素に相対属性を持つ閉じ親にそれぞれ位置付けるように指示します。

次の手順では、レイヤーを制御するためにさらにいくつかの属性を適用します。私の理解では、イメージを最上位レイヤに、テキストを下位レイヤにしたいと考えています。これを解決するには、画像にposition: relative; z-index: 2を適用し、テキストにz-index: 1を追加します。 z-index属性は、重なり合う要素にレイヤー順序を与えます。その要素のデフォルトの位置はZ-インデックス属性を無視するので、画像にposition: relativeを与える必要があります。物事はもっと近づき始めるはずです。

ここでは、display: blockとdisplay: noneというアトリビュートを使用して、イメージを非表示にしてテキストを表示すると述べました。これはあなたが記述した機能に基づいて動作しますが、表示するように設定してからジャンプエフェクトを作成します：noneは高さの設定を失い、ページ上で崩壊することになります。これを望んでいない場合は、代わりにvisibility: hiddenとvisibility: visibleを使用します。

しかし、私はおそらく代わりに行うだろうと、新しいCSSクラスを追加します：

.hidden{ opacity: 0 } 

あなたが単純なJavaScriptを持つことができ、また、フェード効果をアニメーションの範囲に行くことができますこの方法です。これは、次のコードを使用することになり、Javascriptのといえば：

HTML：：外

<div id="main-image-div" class="text-center" style="position: relative"> 
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail"> 
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>   
</div> 

CSS

.hidden{opacity: 0} 

ここ

$("#main-image").click(function(){ $(this).toggleClass('hidden') }); 

はいくつか変更したコードは次のようになります。この範囲では、インライン・スタイリングを避け、htmlだけでクラスを使用するようにしてください。それらのクラスをあなたのCSSコードで参照し、あなたのスタイリングをそこに適用してください。これにより、サイトが構築されるにつれ、よりクリーンで管理しやすいコードが可能になります。

Answer 3

は、あなたは間違いなくこの質問にいくつかのコードを追加したいとしている

$(document).ready(function(){ 

     $("#main-image").click(function(){ 
     $(this).removeClass('show-block'); 
     $(this).addClass('hide-block'); 
     $('#history-timeline').removeClass("hide-block"); 
     $('#history-timeline').addClass("show-block"); 

     }); 
     $("#history-timeline").click(function(){ 
      $(this).removeClass('show-block'); 
     $(this).addClass('hide-block'); 
     $('#main-image').removeClass("hide-block"); 
      $('#main-image').addClass("show-block"); 

     }); 

    }); 

DEMO