css - a:hover变色问题

浏览数：24 / 时间：2015年06月09日

今天在帮我们学校做网站的时候,由于在css这里不是很擅长,过程中发现一个问题,a:hover的时候,字体的颜色不变.后来才发现将a和div的嵌套的问题,

我的css代码为:

.left_box .lb_wrap .lb_theme {
    color:#900;
    text-align:center;
    height:30px;
    display: block;;
    margin-left: auto;
    margin-top: 1px;
    line-height: 35px;
}
.left_box .lb_wrap  a {
    display:block;
    text-align:center;
    height:30px;
    width:100%;
}
.left_box .lb_wrap a:link {
    color:#900;
    background: #FFF no-repeat 5px 12px;
    text-decoration:none;
}

.left_box .lb_wrap  a:hover {
    color:#FFF;　　/*鼠标滑过的时候,字体应该变为该色调(白色),但是实际上没有*/
    background:#800  no-repeat 5px 12px;
    font-size: 12px;
    font-weight: bolder;
    text-decoration:none;
}
.left_box {
    border: 1px solid #09F;
    margin-top: 16px;
}

/*lb:left box*/
.left_box .lb_wrap {
    width:95%;
    background:#900;
    margin-top:5px;
    margin-left: auto;
    margin-bottom:30px;
    font: Arial, "宋体";
}

html代码为:

<div class="left_box">
<div class="lb_wrap">
    <div class="lb_title">国家、广西特色专业</div>
    <a href="/Item/88951.aspx">
    <div class="lb_theme">地理信息系统</div> <!--div不能放在div中,否则a:hover不起作用-->
    </a>

    <div class="lb_theme"><a href="/Item/88943.aspx">地理科学（教师教育)</a></div>

</div>