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

Question

我正在尝试将图像中的文本居中，并让文本在悬停时改变颜色。但是，文本之间的分隔线一直在敲掉网格，我无法使 a:hover 功能正常工作？感谢您的帮助。

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

http://jsfiddle.net/pR8C4/

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-selector #gallery li a:悬停。