Question

<style>
#count2{
visibility:hidden;
}
#count1:hover{
background:#123456;
//how do I change the visibility property of #count2 here?
}
</style>
<div id="count1">My visible element</div>
<div id="count2">My flickering element</div>

My question is clear and might be little weird though. How do I change the visibility property of #count2 to true when somebody hovers on #count1, using only css.

Answer 1

Since you’re modifying two different elements on hovering one of them, you can use a sibling combinator followed by the #count2 selector in a separate rule for modifying that particular element:

#count2 {
    visibility: hidden;
}

#count1:hover {
    background: #123456;
}

#count1:hover + #count2 {
    visibility: visible;
}