Question

我的网站： http://www.lotusroomofboca.com/menu.html

我终于让鼠标悬停工作以显示下面的绿色，但我放在图片上的文字标题显示在悬停时笨拙。我想让他们出现绿色褪色。此外，如果将鼠标悬停在字幕上，则淡入淡出不起作用..

@Trevor这里是这个图库的所有CSS：

.floated_img {float:left;
               width:210px;
                  height:144px;
                  margin-right:15px;
                  margin-bottom:15px;
                  background-color:#7b8c6f;
                  text-align:center;
                 }  

.floated_img img {width:210px;
                  height:144px;
                  margin-right:15px;
                  margin-bottom:15px;
                  background-color:#7b8c6f;
                  position:absolute
                  } 

.floated_img img:hover {-moz-opacity:0.15;
                        -khtml-opacity: 0.15;
                        opacity: 0.15;
                        transition-duration:0.5s;}  

.caption p {
    font-family: 'Avenir';
    font-size: 15px;

}


.caption {
    z-index: 1000;
    color: white;
    text-align: center;
    position: absolute;
    top: 25%;
    margin: auto;
    display: none;
    pointer-events: none;
}         

.floated_img:hover .caption {z-index:10000;
          color:white;
          text-align:center;
          position:relative;
          margin:auto;
          display:block;}

Answer 1

尝试：

.caption p {
    font-family: 'Avenir';
    font-size: 15px;
    opacity: .6;  // makes a little of the green color go through
}


.caption {
    z-index: 1000;
    color: white;
    text-align: center;
    position: absolute;
    top: 25%;
    margin: auto;
    display: none;
    pointer-events: none; // new makes it so the caption does not interfere with hover
}

更新2 尝试：

.caption {
    z-index: 1000;
    color: white;
    text-align: center;
    position: relative;  //new
    top: 25%;
    margin: auto;
    pointer-events: none;
    display: block; 
    opacity: 0; 
    transition: opacity .5s; 
    -webkit-transition: opacity .5s;
}         

.floated_img:hover > .caption {z-index:10000;
          color:white;
          text-align:center;
          position:relative;
          margin:auto;
          opacity: 1;
}

图库图片上的字幕问题

1 个答案: