将鼠标悬停在页面中间和缩略图中

时间：2014-09-25 03:04:19

标签： css

我正在尝试为图库悬停图片。当用户将鼠标悬停在图像上时，它会在页面中间以固定位置弹出，但现有图像（缩略图）仍保持原位。

然而，不确定我做错了什么，悬停图像在图像本身而不是主页面中。

我为主页弹出的图像隐藏了另一个图像，以便页面中的缩略图保持在原位。但是这个图像位于缩略图中。

Demo 

 body {
      margin: 0;
      padding: 0;
      background: #EEE;
      font: 10px/13px 'Lucida Sans',sans-serif;
    }

.wrap {
      overflow: hidden;
      margin: 50px;
    }

/*20 for 5 box , 25 for 4 box*/ 
.box {
      float: left;
      position: relative;
      width: 25%;
      padding-bottom: 25%;
      color: #FFF;


    }
    /*border width control*/
.boxInner {
      position: absolute;
      left: 30px;
      right: 30px;
      top: 30px;
      bottom: 30px;
      overflow: hidden;
      background: #66F;

    }

.boxInner img {
      width: 100%;
    }





.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}





/*This hover is for small image*/
.thumbnail:hover img{
border: 1px solid transparent;
}

/*This hide the image that is in the span*/
.thumbnail span{ 
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}

/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:200%; /* you can use % */
height: auto;
padding: 2px;
}

/*When mouse over, the hidden image apear*/
.thumbnail:hover span{ 
position:absolute;
visibility: visible;
top: 0;
left: 0; 
z-index: 200;
}

3 个答案:

答案 0 :(得分：1)

它的位置已更改为absolute而不是fixed，这就是它被父span裁剪的原因。如果将其更改为fixed，它应该可以正常工作。所以，改变这个，

.thumbnail:hover span{ 
position:absolute;
visibility: visible;
top: 0;
left: 0; 
z-index: 200;
}

到这个

.thumbnail:hover span{ 
position:fixed;
visibility: visible;
top: 0;
left: 0; 
z-index: 200;
}

你可能想要调整一些其他属性，例如width，所以不需要200%离开页面

这是JS Fiddler Example，其中我添加了以下css声明

.thumbnail:hover span{ 
position:fixed;
visibility: visible;
    max-width:600px;
top: 0;
left: 0; 
z-index: 200;
    left:25%;
    top:25%;
}

.thumbnail:hover span img{ 
    width:100%;
}

答案 1 :(得分：0)

替换

.thumbnail:hover span{ 
position:absolute;
visibility: visible;
top: 0;
left: 0; 
z-index: 200;
}

与

.thumbnail:hover span{ 
    position:fixed;
    visibility: visible;
    max-width:600px;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin: auto;
    z-index: 200;
}

答案 2 :(得分：0)

试试这个。

＆＃13;
＆＃13; 
 body {
   margin: 0;
   padding: 0;
   background: #EEE;
   font: 10px/13px'Lucida Sans', sans-serif;
 }
 .wrap {
   overflow: hidden;
   margin: 50px;
 }
 /*20 for 5 box , 25 for 4 box*/
 .box {
   float: left;
   position: relative;
   width: 25%;
   padding-bottom: 25%;
   color: #FFF;
 }
 /*border width control*/
 .boxInner {
   position: absolute;
   left: 30px;
   right: 30px;
   top: 30px;
   bottom: 30px;
   overflow: hidden;
   background: #66F;
 }
 .boxInner img {
   width: 100%;
 }
 .gallerycontainer {
   position: relative;
   /*Add a height attribute and set to largest image's height to prevent overlaying*/
 }
 /*This hover is for small image*/
 .thumbnail:hover img {
   border: 1px solid transparent;
 }
 /*This hide the image that is in the span*/
 .thumbnail span {
   position: absolute;
   padding: 5px;
   visibility: hidden;
   color: black;
   text-decoration: none;
 }
 /*This is for the hidden images, to resize*/
 .thumbnail span img {
   /*CSS for enlarged image*/
   border-width: 0;
   width: 200%;
   /* you can use % */
   height: auto;
   padding: 2px;
 }
 /*When mouse over, the hidden image apear*/
 .thumbnail:hover span {
   position: fixed;
   visibility: visible;
   z-index: 200;
   zoom: 62%;
   bottom: 0;
   right: 0;
 }
 .thumbnail:hover span img {
   width: 100%;
 }
＆＃13; 
<!DOCTYPE html>
<html>
<link href="overlay2.css" rel="stylesheet" type="text/css" />

<head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
</head>


<body>


  <div class="wrap">

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /></span>
        </a>

      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /></span>
        </a>
      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /></span>
        </a>
      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /></span>
        </a>
      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /></span>
        </a>
      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /></span>
        </a>
      </div>
    </div>

    <div class="box">
      <div class="boxInner">
        <a class="thumbnail" href="#">
          <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /><span><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /></span>
        </a>
      </div>
    </div>




  </div>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题