Display Listbox On Textbox Hover By CSS - css

Question

I am not able to display listbox on mouse hover on textbox as below
<table id="Search">
<tr>
<td>
<asp:TextBox runat="server" ID="topics" CssClass="TT"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="LstBox" CssClass="LB" runat="server" >
<asp:ListItem Text="Mahesh" Value="1"></asp:ListItem>
<asp:ListItem Text="Mahendra" Value="2"></asp:ListItem>
<asp:ListItem Text="Kirti" Value="3"></asp:ListItem>
</asp:ListBox>
</td>
</tr>
</table>
CSS
td .LB
{
display:none;
position:relative;
}
td TT:hover .LB
{
display:block;
position:absolute;
}
How to display listbox on mouse hover on textbox?.

Answer 1

You can do it like this.
HTML
<table id="Search">
<tr>
<td>
<asp:TextBox runat="server" ID="topics" CssClass="TT"></asp:TextBox>
<asp:ListBox ID="LstBox" CssClass="LB" runat="server" >
<asp:ListItem Text="Mahesh" Value="1"></asp:ListItem>
<asp:ListItem Text="Mahendra" Value="2"></asp:ListItem>
<asp:ListItem Text="Kirti" Value="3"></asp:ListItem>
</asp:ListBox>
</td>
</tr>
</table>
CSS
table tr td{
position:relative;
}
.TT{
/*It's optional to provide it these three property.*/
position:absolute;
left:0; /*Change values according to your adjustments*/
top:0; /*Change values according to your adjustments*/
}
.LB{
position:absolute;
left:0; /*Change values according to your adjustments*/
top:0; /*Change values according to your adjustments*/
display:none;
}
/*If you want to keep it visible, better use on :focus Pseudo class*/
table td:focus .LB,table td:hover .LB
{
display:block;
}
OR better option
JQUERY
/This will work directly with your textbox. Don't forget to add jQuery latest version./
<script>
$(document).ready(function () {
$(".TT").hover(
function () {
$('.LB').css('display','block');
}, function () {
$('.LB').css('display', 'none');
}
);
});
</script>

Answer 2

try this
td .TT:hover .LB
{
display:block;
position:absolute;
}
References: Use :hover to modify the css of another class?