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

Posted 2023-05-08

【中文标题】通过 CSS 在文本框悬停时显示列表框

【英文标题】：Display Listbox On Textbox Hover By 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

【参考方案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?