Nested hovers

by audetwebdesign

HTML

<div class="link-wrap">
    <div class="link-panel">Link 1</div>
    <div class="link-panel">Link 2</div>
    <div class="link-panel">Link 3</div>
    <div class="link-panel">Link 4</div>
</div>

CSS

.link-wrap {
    background-color: lightgray;
    overflow: auto;
    display: inline-block;
}
.link-panel {
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: blue;
    color: white;
    float: left;
    margin: 10px; /* Optional: To show edges of container block */
}
.link-wrap:hover .link-panel {
    background-color: yellow;
    color: black;
}
.link-wrap .link-panel:hover {
    background-color: green;
    color: white;
}