Question

我为图片库创建了一个无序列表。在悬停时，它当前显示拇指指甲，如何调整我的代码以使其显示原始的较大的成像器？

我当前代码的一部分：

＆＃13;

.gallery {
    cursor: default;
    list-style: none;
}
.gallery a {
    cursor: default;
}
.gallery a .preview {
    display: none;
}
.gallery a:hover .preview {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}
.gallery img {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}
.gallery li {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}
.gallery .preview {
    border-color: #000;
    width: 200px;
    height: 150px;
}

＆＃13;

<div class="pictures">
  <h1>S.O.S - Image Gallery</h1>
  <ul class="gallery">
    <li>
      <a href="#">
        <img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." />
        <img src="thumb/thumb2.jpg" alt="Newcastle PSA workplace group at the IRC." class="preview" />
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

您好，您可以使用Jquery ToolTip。 http://jsbin.com/ozepod/6/?html,js,output

Pure CSS＆amp; HTML5： HTML：

  <p>
    Lorem ipsum dolor sit amet<span class="tooltip tooltip-top" data-tooltip="Hello, I'm a tooltip on Top!">Tooltip on top</span> 
      consequat.</p>

css:
p {
    max-width: 800px;
    margin:30px auto;
    font-size: 22px;
    line-height: 35px;
}

/* Some basic styling to notify users
   about the tooltips*/
.tooltip {
  color: green;
  text-decoration: none;
}

.tooltip:hover {
  color: red;
  position: relative;
}

/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0; 
  bottom: 100%;
  white-space: nowrap; 
  z-index: 20px;

  background-color: #000;
  color: #fff;
}

对于纯CSS和HTML5工具提示，请参阅codepen：

pen/waOwZv

图片工具提示：

<a class="tooltip" href="">
   Demonstration
   <span><img src="http://www.scriptol.com/images/apache.png">
   <h3>How use my site</h3>
    The description with an image.
   </span>
</a>

CSS：

.tooltip
{
  text-decoration:none;
  position:relative;
}


.tooltip span
{
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white; 
}


.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}


.tooltip:hover span
{
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:auto;
  max-width:320px;
  min-height:128px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

来源：http://www.scriptol.com/css/tooltip.php

Answer 2

它已经有效，你只需要换掉第二张图片：https://jsfiddle.net/3q29wvyv/1/。

.gallery {
         cursor: default;
         list-style: none;
         }

   .gallery a {
         cursor: default;
         }

   .gallery a .preview
         {
          display: none;
         }

   .gallery a:hover .preview
         {
         display: block;
         position: absolute;
         top: -33px;
         left: -45px;
         z-index: 1;
         } 

   .gallery img {
         background: #fff;
         border-color: #aaa #ccc #ddd #bbb;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         padding: 2px;
         vertical-align: top;
         width: 100px;
         height: 75px;
         }

   .gallery li
         {
         background: #eee;
         border-color: #ddd #bbb #aaa #ccc;
         border-style: solid;
         border-width: 1px;
         color: inherit;
         display: inline;
         float: left;
         margin: 3px;
         padding: 5px;
         position: relative;
         }

   .gallery .preview
         {
         border-color: #000;
         width: 200px;
         height: 150px;
         }

<div class="pictures">
   <h1>S.O.S - Image Gallery</h1>
   <ul class="gallery">
   <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Thumbnail1.jpg" alt="Newcastle PSA workplace group at the IRC." /><img src="https://www.trophycupcakes.com/sites/default/files/styles/standard_cupcake_detail/public/cupcakes/cupcake-red-velvet.jpg?itok=Zyu04GZ6" alt="Newcastle PSA workplace group at the IRC." class="preview" /></a>
   </li>
   </ul>
   </div>

Answer 3

只需将大图片的文件名写入第二个img标记（带有class="preview"的标记）

如何让缩略图在悬停时显示较大的原始图像？

3 个答案: