when hover the box, other box display-block is not working - html

Question

#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
#c_w:hover {display:block;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
i wanna make #c_w box showing when i hover .color_td box.
why is it not work???
any help will be so appreciated.
Thank you

Answer 1

If you remove the a tag as .color_td's parent, then you access #c_w like this-
.color_td:hover + #c_w {
display:block
}
#c_w {
background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;
}
.color_td {
height:27px;
width:27px;
margin:2px;
border-radius:5px;
}
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
<div id="c_w">White</div>
Or if you want to keep the a tag as .color_td's parent, then you could achieve the desired effect with Javascript-
let color_td = document.querySelector('.color_td');
let c_w = document.querySelector('#c_w');
// listen for 'mouseenter' event
color_td.addEventListener('mouseenter',()=> {
c_w.style.display = "block"
});
// listern for 'mouseleave' event
color_td.addEventListener('mouseleave', ()=> {
c_w.style.display = "none"
});
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;}
.color_td {height:27px;
width:27px;
margin:2px;
border-radius:5px;}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>

Answer 2

your doing wrong here,
#c_w {background-color:rgba(0, 0, 0, 0.5);;
width:55px;
height:25px;
color:white;
text-align:center;
padding-top:3px;
position:absolute;
margin-top:38px;
margin-left:-12px;
display:none;} /* <- */
#c_w:hover {display:block;} /* <- */
As, You cant hover on a hidden element
instead you wanna do something like this,
1. keeping ur html un-touched
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
a:hover + #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2"></div>
</a>
<div id="c_w">White</div>
2. move the #c_w under .color_td
#c_w {
background-color: rgba(0, 0, 0, 0.5);
width: 55px;
height: 25px;
color: white;
text-align: center;
padding-top: 3px;
position: absolute;
margin-top: 38px;
margin-left: -12px;
display: none;
}
.color_td:hover #c_w { /* ModifiedCss */
display: block;
}
.color_td {
height: 27px;
width: 27px;
margin: 2px;
border-radius: 5px;
}
<a href="#">
<div class="color_td" style="background-color:white;float:left; border:1px solid #c2c2c2">
<div id="c_w">White</div> <!-- ModifiedHtml -->
</div>
</a>
Here, i thing is, you gotta, wrap the hidden element in something that visible (hoverable), and edit style properties of that targted hidden element by making it child or sibling or soemthing like that...