html - 如何在不嵌套 anchor 的情况下向嵌套的 div 标签添加链接？

Question

我正在尝试添加悬停效果以在应用 anchor 标记后更改每个 div 的背景颜色。

问题是如果没有嵌套 anchor 标记，我不知道该怎么做。即便如此，我也没有得到想要的结果。

请随意摆弄它:http://jsfiddle.net/69nTS/

这个 fiddle 已经由 doktorgradus 编辑并且更接近我正在寻找的:http://jsfiddle.net/nFUmY/1/

非常感谢您的帮助!

这是 CSS:

#team-container {
width: 770px;
}
/*    #inner-container {
margin: 0px auto;
width: 766px;
}*/
.first {
    background-color: #6f6f6f;
    text-align: center;
    color: #fff;
    font-weight: bold;
}
.second {
    margin: 4px 2px;
    display: inline-block;
    width:150px;
    text-align: center;
    float: left;
    background-color: #aaa;
    font-weight: bold;
}
.third {
    background-color: #ccc;
}
.fourth {
    background-color: #eee;
    display: inline-block;
    width: 118px;
    font-style: italic;
}
.first, .second, .third, .fourth {
    border-radius: 5px;
    padding: 6px 0;
}
.third, .fourth {
    margin: 4px 8px;
    font-weight: normal;
}

这是 html:

<div id="team-container">
<div class="first">General Services Agency</div>
<!--<div id="inner-container">-->
<div class="second">Administration &amp;
    <br />Finance
    <div class="third">Central Mail</div>
    <div class="third">Finance</div>
    <div class="third">Purchasing</div>
</div>
<div class="second">Airports
    <div class="third">Finance</div>
    <div class="third">Operations</div>
</div>
<div class="second">General Services
    <div class="third">Architectural Services</div>
    <div class="third">Facility Services
        <div class="fourth">Custodial Day</div>
        <div class="fourth">Custodial Night</div>
        <div class="fourth">Maintenance 1</div>
        <div class="fourth">Maintenance 2</div>
        <div class="fourth">Surplus</div>
    </div>
    <div class="third">Finance</div>
    <div class="third">Fleet Services</div>
    <div class="third">Real Property</div>
</div>
<div class="second">Information Technology
    <div class="third">Administration &amp; Finance
        <div class="fourth">Service Desk</div>
    </div>
    <div class="third">Applications
        <div class="fourth">EFS</div>
        <div class="fourth">Law &amp; Justice</div>
        <div class="fourth">Property/Tax</div>
    </div>
    <div class="third">Infrastructure
        <div class="fourth">Communications</div>
        <div class="fourth">Desktop Services</div>
        <div class="fourth">Health Agency IT</div>
        <div class="fourth">Network &amp; Servers</div>
        <div class="fourth">Operations</div>
    </div>
    <div class="third">Project Management Office</div>
</div>
<div class="second">Parks
    <div class="third">Finance</div>
    <div class="third">Dairy Creek
        <br />Golf Course</div>
    <div class="third">Morro Bay
        <br />Golf Course</div>
    <div class="third">Operations
        <div class="fourth">Huasna District</div>
        <div class="fourth">Mesa District</div>
        <div class="fourth">Pecho District</div>
        <div class="fourth">Salinas District</div>
    </div>
    <div class="third">Planning</div>
</div>

Answer 1

纯 CSS 的悬停效果(如果我理解你的问题):

`.second:hover {
    background-color: #aee;
 }
 .third:hover {
     background-color: #eae;
 }

 .fourth:hover {
     background-color: #eea;
 }`