通过 CSS 在文本框悬停时显示列表框答案

【问题标题】：Display Listbox On Textbox Hover By CSS通过 CSS 在文本框悬停时显示列表框
【发布时间】：2014-08-26 10:37:13
【问题描述】：

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

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

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

【问题讨论】：

我不确定是否可以通过 css 完成，但可以通过 java-script 或 jQuery 完成。
@Șhȇkhaṝ，好吧，不如建议。但想知道为什么在 css 中不可能？。
我看到了一些example，其中展示了如何在其他控件悬停时处理其他控件 css

标签： css asp.net

【解决方案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 最新版本。/

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

【讨论】：

@user2741987 我改变了它。 “表 td：焦点 .LB，表 td：悬停 .LB”。由于“table td”是它们两者的父级，因此 css hover 伪类只会影响您在父级上使用悬停时。否则我们用 jQuery 来做输入框。
@user2741987 很高兴。

【解决方案2】：

试试这个

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

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

【讨论】：