Question

我无法在鼠标悬停在文本框上显示列表框，如下所示

<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;
}

如何在文本框上鼠标悬停时显示列表框？

Answer 1

你可以这样做。

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;
    }

或更好的选择 JQUERY / 这将直接与您的文本框一起使用。不要忘记添加jQuery最新版本。 /

        <script>
            $(document).ready(function () {
                $(".TT").hover(
                  function () {
                      $('.LB').css('display','block');
                  }, function () {
                      $('.LB').css('display', 'none');
                  }
                );
            });
        </script>

Answer 2

试试这个

td .TT:hover .LB
{
   display:block;
   position:absolute;
}

参考文献：Use :hover to modify the css of another class?

在CSS上显示文本框上的列表框

CSS

2 个答案: