Menu
I want to change the bg-color of .circle.icon if posts-item is hovered. Any idea how to accomplish that, possibly without Javascript?
<div id="scr1" class="large-6 columns timeline">
<div class="line"></div>
<ul class="posts">
<li class="posts-item">
<div class="circle icon"></div>
<h2 class="posts-item-title">
<a href=""></a>
</h2>
<p class="summary"></p>
</li>
</ul>
</div>
217
The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!
The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected.
Like so.
.posts-item:hover .circle.icon {
background: green;
}
No jQuery - Everyone's happy :)
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
