Hover Effect: Show Listbox When Textbox is Hovered Using CSS

I'm having trouble showing a listbox when hovering over a textbox. Here's the code:

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

Any suggestions on how to make the listbox appear when hovering over the textbox?

Answer №1

You have the ability to accomplish it in this manner.

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 not mandatory to assign these three properties.*/
    position:absolute; 
    left:0;  /*Adjust values as needed*/
    top:0;   /*Adjust values as needed*/
    }

    .LB{
    position:absolute; 
    left:0;  /*Adjust values as needed*/
    top:0;   /*Adjust values as needed*/
    display:none;
    }

    /*To keep it visible, consider using :focus Pseudo class*/
    table td:focus .LB,table td:hover .LB
    {
    display:block;
    }

Another good alternative JQUERY /This method will directly interact with your textbox. Ensure you include the latest version of jQuery./

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

Answer №2

give this a shot

div .text:hover p.LB
{
   display:inline;
   position:relative;
}

Source: How to change CSS properties of another class on hover?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange one div on top of another div using Bootstrap

Could someone please show me how to position a div above another div? Here is the desired layout: https://i.sstatic.net/mpeue.png <div class="col-md-12 container"> <div class="col-md-12"> box1 </div> <div class="col-md-12" ...

The HTML code starts with a fluid middle column in a 3-column layout, while the other two columns have fixed widths

I am interested in creating a traditional 3-column layout similar to this: | | | | |L | M |R | | | | | I have been tasked with using the following html structure: as depicted, the Main div is the initial node of #container <body> ...

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

Is it possible to use reflection to manipulate HttpContext.Current.UserIdentity.Name?

I've been experimenting with this code snippet: typeof(FormsIdentity) .GetField("Name", BindingFlags.Instance | BindingFlags.NonPublic) .SetValue(HttpContext.Current.User.Identity, newUsername); However, the typeof(FormsIdentity).GetField("N ...

Navigating through ASP.NET Controls' properties using Parallel.Invoke

Can UI control properties be safely accessed in ASP.Net using Parallel.Invoke method? Although I have not encountered any issues so far, I am uncertain if there might be potential problems. In the code snippet below, I am accessing the Text property of tw ...

Is it possible to set attributes for @Html.Textbox() on the fly?

I'm facing a slight challenge that should be easy to resolve. My goal is to dynamically generate controls, each with custom HTML attributes (such as data-blah="blah", etc.). To achieve this, I have been storing the attributes in a dictionary and then ...

Is misbehavior expected at approximately 600 pixels in width?

What is happening with my website when the width is minimized, and how can I resolve it? Issue The website appears fine on mobile devices and full screens, but at reduced sizes, the background image disappears and the top bar behaves strangely (with the l ...

How can I make sure that index.php displays the current page when I am navigating through categories on the WordPress

In my WordPress website, I have set up categories in the main navigation. Specifically, I have a category named "Home" which corresponds to category 4. To display the Home category (start page), I have added the following code to my index.php file: <?p ...

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resoluti ...

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...

Centering multiple nested divs inside a parent div

I am experiencing an issue with center aligning several nested divs inside a container. The contents (nested divs) are not aligning properly within its parent element. <div id="parent"> <span id="menu_0" class="d"></span> <span ...

Issues with Hovering over Button Contained in Slider

I can't seem to figure this out. It should be a simple fix. I have 5 slider images with black buttons that link to different galleries. I want the button background color to change on hover, but it's only working on one of the sliders. It seems ...

Content within the two inline divs is experiencing alignment problems?

I am experiencing alignment issues with the content inside two divs that contain multiple nested divs. The content is not properly aligned. CSS Code: .breadcrumb-nav{ margin-left: 230px; left: 70px; top: 70px; width: 1291px; height: 6 ...

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

The final column appearing as green within the Bootstrap CSS

Seeking to highlight the final column of a table in green. I am working with a table that utilizes Bootstrap styles (it's ASP.Net) and I am looking to make the last column green. While the full table is longer, I am specifically referring to 'Gr ...

Create an image of a static map from Google

I have incorporated the Google Static Map API into my Angularjs Application to display images of Google maps. Browse here for a glimpse Everything operates smoothly when there are fewer map coordinates. However, when I increase the number of map coordina ...

Trouble aligning content in CSS? Try using justify-content center for perfect centering!

I am facing an issue with centralizing the content properly. Despite using justify-content:center, the layout breaks. https://i.sstatic.net/EMiw1.png When I apply justify-content:center, the layout appears like this: https://i.sstatic.net/lTJRi.png Her ...

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...