Question

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

问题是我不知道如何在没有嵌套锚标签的情况下做到这一点。即便如此，我也没有得到预期的结果。

这个小提琴已由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;
 }`

Answer 2

以下是div突出显示和＆＃34; Central Mail＆＃34;链接到谷歌。 JSFiddle

您只需将div嵌套在锚点内，而不是相反。

<a href="http://google.com"><div class="third">Central Mail</div></a>

也是用于悬停在其中一个类上的CSS：

.third:hover {
    background-color: orange;
}

我清除了锚的常用样式，以防止下划线和着色：

a {
    text-decoration: none;
    color: initial;
}

如何在不嵌套锚点的情况下添加到嵌套div标签的链接？

2 个答案: