0

アンカータグが適用されると、ホバー効果を追加して、各 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 &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>

4

2 に答える 2

0

ここでは、div の強調表示と「Central Mail」の両方が Google にリンクされています。 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;
}
于 2013-09-06T20:45:03.440 に答える
0

純粋な CSS でのホバー効果 (質問が理解できれば):

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

 .fourth:hover {
     background-color: #eea;
 }`
于 2013-09-06T20:29:47.660 に答える