画像の上にマウスを移動すると、画像の横にHTMLポップアップウィンドウを作成するにはどうすればいいですか？

-1

私は別のページを訪問するためのリンクとしていくつかの画像があるウェブページを作ろうとしていますが、HTMLのページの要約、タイトル、その他の詳細を画像の隣にポップアップ表示したいボタン "Read More"または何か）。 this oneのようなポップアップを作成しようとしています：画像の上にマウスを移動すると、画像の横にHTMLポップアップウィンドウを作成するにはどうすればいいですか？

私のイメージはすでにあります。イメージの隣に別のポップアップがあるテンプレートは見つかりません。タイトルとテキストがの中にポップアップとして表示されているのではなく、の中にあります。これはCSSで行うのが複雑か、それとも可能ですか？

ありがとうございます！私の質問に明確化の必要がある場合は、質問してください！
あなただけのこの1は、CSS aを使用して、JavaScriptを使用せずに行われ、たとえばそれ

の横にポップアップさせるために座標設定position:absoluteでポップアップdiv要素を作ることができず、
<a href="SecretPlants.html"> <img class="imgLinks" src="file:///E:/Grace/Art/Animation-Computing/Website/ContentTABS/ResourceFiles/Literature/TheSecretsHeldInPlants/SecretLifeofPlantsCover.jpg" alt="Link to Plants Research Paper" height="300"> <a href="EmbraceDifferences.html"> <img class="imgLinks" src="Embrace Differences Cover Image.jpg" alt="Link to Plants Research Paper" height="300"> <a href="Teams of Teams, Hierarchy of Teams, and Hierarchy Essay.html"> <img class="imgLinks" src="Cover.jpg" alt="Link to Hierarchy and Team Critical Essay" height="300">

出典

2017-06-08 Grace Sawyer

私はうまくいけば、それはあなたのために役に立つことができ、あなたのための例を作成します。

HTML：

<div class="button"> 
    <img class="parentPic" src="http://lorempixel.com/400/200/sports/1" alt"test" /> 
    <section class="speech"> 
    <div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"> 
     <div class="list-group"> 
      <a href="#" class="list-group-item active"> 
      <h4 class="list-group-item-heading">List group item heading</h4> 
      <p class="list-group-item-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p> 
      </a> 
     </div> 
    <div class="well well-sm">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</div> 

    <ul class="list-group"> 
    <li class="list-group-item"> 
    <span class="badge">14</span> 
Cras justo odio 
</li> 
</ul> 

</div> 
    <div class="col-md-2"></div> 
    </div> 

</section> 
</div>

CSS：

.button { 
    position: relative; 
} 

.button > img {

表示：インラインブロック。

color: #fff; 
    padding: 0.4em 0.6em; 
    font-size: 1.3em; 

    } 

    .button section { 
    display: none; 
    position: absolute; 
    top: 2em; 
    left: 32em; 
    padding: 20px; 
    margin: 0; 
    border: 5px solid #fd0; 
    background: white; 
    border-radius: 1em; 
    } 

.button section > p { 
    display:block; 
    text-align:center; 
    } 
} 

.button .parentPic { 
    display: block; 
    border-radius: 0.8em; 
    max-width: 100%; 
    height: auto; 
    } 

.button:focus section, 
.button:hover section { 
    display: inline-flex; 
    top:0px; 
    } 

.speech { 
    position: relative; 
    width: 300px; 
    height: 400px; 
    text-align: center; 
    line-height: 20px; 
    background-color: white; 
    border: 8px solid #fd0; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    } 
    .title{ 
     text -align:center; 
    } 
    .speech > p{ 
     padding:15px; 
    } 

    .speech:before { 
     content: ' '; 
     position: absolute; 
     width: 0; 
     height: 0; 
     left: 0px; 

     border: 0px solid; 
     border-color: #fd0 transparent transparent #fd0; 
    } 

    .speech:after { 
     content: ''; 
     position: absolute; 
     width: 0; 
     height: 0; 
     left: -29px; 
     top: 50px;    
     border-top: 13px solid; 
     border-left: 25px solid; 
     border-right: 3px solid; 
     border-top-left-radius: 39px; 
     border-bottom-left-radius: 41px; 
     border-color: #fd0 transparent transparent #fd0; 
    }

https://jsfiddle.net/emilvr/9x7j430L/3/

出典

2017-06-08 03:49:26

：

を合わせます

<html> 
<head> 
    <style> 
     #popup0 { 
      visibility:hidden; 
      position:absolute; 
      z-index:1; 
     } 

     a#link0 { 
      display:inline; 
     } 
     #popup0 { 
      display:inline; 
     } 
     a#link0:hover #popup0{ 
      visibility:visible; 
      position:absolute; 
     } 
     #something { 
      display:inline; 
     } 
    </style> 
</head> 
<body> 
    <a href="" id="link0"> 
     hover here 
     <img id="popup0" src="/home/muhamizz/hal/Assets/app_logo.png" /> 
    </a> 
    <div id="something"> 
     other things next to it 
    </div> 
</body> 

</html>

出典

2017-06-08 01:29:15 imakin

画像の上にマウスを移動すると、画像の横にHTMLポップアップウィンドウを作成するにはどうすればいいですか？

答えて

関連する問題