Question

我尝试将图片置于图像中心，并让文字在悬停时改变颜色。然而，文本之间的分隔符不断淘汰网格，我不能让a：hover函数工作？谢谢你的帮助。

这是我想要实现的目标， http://tinypic.com/view.php?pic=az791h&s=8#.U4i1MfldUrU

enter code here

    <div id="gallery">
    <ul>
        <li>
            <div class="gallery-image"> 
            <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
            <p class="gallery-desc">top title</p>
            <div class="line-separator-three"></div>
            <p class="gallery-desc-bottom">bottom title</p></a>         
            </div>
        </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/>
                <p></p></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>

                </div>
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/people-q-g-320-220-1.jpg"/></a>
                </div>
            </li>
         </ul>
        </div>


    enter code here

#gallery {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    margin-top:45px;
    position:relative;
    -webkit-transform: translateZ(0);
}
#gallery ul {
    list-style:none;
    margin:0;
    padding:0;
}
#gallery ul li {
    overflow:hidden;
    width: 30%;
    margin:1.66%;
    float:left;
}
#gallery li a {
    position:relative;
    display:block;

}
#gallery ul p {
    position:absolute;
    z-index:2;
    padding-left:20%;
    top:33%;
    font-size:1.5em;
    font-family:'avenir';
    text-align:center;
}
#gallery ul a {
    color:#fff;
}
.gallery li a:hover{
    color:#FF8000;

}
#gallery ul img {
    position: relative;
    z-index:1;
    width: 100%;
}
.line-separator-three{
    width:50%;
    margin-left:25%;
    height:1px;
    background:#F5F5F5;
    border-bottom:1px solid #F5F5F5;
    margin-top:20px;
    margin-bottom:20px;
    position:absolute;
    z-index:3;
}
enter code here

Answer 1

对于:hover效果，您只需将类选择器.gallery li a:hover更改为ID选择器#gallery li a:hover。

在图像中居中文本并在悬停时更改文本颜色

1 个答案: