Question

我正在尝试在CSS中的悬停图像的右上角插入一个关闭按钮。但是，图像显示在悬停图像的中间。我不确定哪个区域犯了错误。

这些是我的css代码，我也将它们插入jsfiddle以用于我的演示

body {
    margin: 0;
    padding: 0;
    background: #EEE;

}

#pagecenter {
    background-color: transparent;  
    width: 1200px;  
    min-width: 1200px; 
    height: auto;
    min-height: 100%;
    padding-top: 0px;  
    padding-right: 0px;  
    padding-bottom: 0px;  
    padding-left: 0px;  
    margin-top: 0px;  
    margin-right: auto;  
    margin-bottom: auto;  
    margin-left: auto;  
    position: relative;  
    border-collapse: collapse;
}

.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: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    overflow: hidden;
    background: #66F;

}

.boxInner img {
    height: 100%;
    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{
    cursor:pointer;
    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:100%; /* you can use % */
    height: auto;
    padding: 2px;
}

/*When mouse over, the hidden image apear*/
.thumbnail:hover span{ 

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

.close{
    position:absolute;
    right:-10px; 
    top:-10px; 
    display:none;

    z-index:1;
}


.thumbnail:hover span .close{ 
 display:block;
}

Answer 1

你需要给出宽度和高度

JS Fiddle

.thumbnail span .close{
    position:absolute;
    right:-10px; 
    top:-10px; 
    display:none;
    width:30px;
    height:30px;
    z-index:1;
}

在CSS中使用关闭按钮悬停图像

1 个答案: