Question

我正在尝试创建一个网页，其中有多个图像作为访问单独页面的链接，我想在图像旁边创建一个弹出窗口，其中包含HTML中页面的摘要，标题和其他详细信息（也许是一个按钮“阅读更多”或其他东西）。我正在尝试创建类似的弹出窗口 this one：

我已经有了我的图片了，我找不到一个模板，图片旁边有一个单独的弹出窗口，因为所有图片css过渡链接都有标题和文本里面图像而不是旁边的弹出窗口。这在CSS中是否复杂，或者是否可能？

提前致谢！如果我的问题需要澄清，请询问！

<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">

Answer 1

您可以使用position:absolute创建弹出式div而不设置其坐标以使其弹出旁边

例如，这个是在不使用javascript的情况下完成的，使用css a：hover

<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>

Answer 2

我为你创建了一个例子，希望它对你有用：

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 {

display：inline-block;

    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/

在鼠标悬停在图像上时如何在图像旁边创建HTML弹出窗口？

2 个答案: