我正在尝试添加悬停效果,以便在应用锚标记后更改每个div的背景颜色。
问题是我不知道如何在没有嵌套锚标签的情况下做到这一点。即便如此,我也没有得到预期的结果。
随意在这里摆弄它:http://jsfiddle.net/69nTS/
这个小提琴已由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 &
<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 & Finance
<div class="fourth">Service Desk</div>
</div>
<div class="third">Applications
<div class="fourth">EFS</div>
<div class="fourth">Law & 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 & 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>
答案 0 :(得分:0)
悬停对纯CSS的影响(如果我理解你的问题):
`.second:hover {
background-color: #aee;
}
.third:hover {
background-color: #eae;
}
.fourth:hover {
background-color: #eea;
}`
答案 1 :(得分:0)
以下是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;
}