Display an additional div when hovering over form input

I am currently in the process of designing a search bar animation. Specifically, I want the search history to appear when hovering over the search bar. However, I am facing an issue where the code doesn't seem to work when I use .search-bar-input:hover + .search-history. As someone who is new to HTML, I suspect it might be a simple error, but unfortunately, I haven't been able to find a solution anywhere.

<div class="search-bar">
    <form class="search-form" autocomplete="off">
        <input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
    </form>
    <div class="search-history">
        search history
    </div>
</div>
.search-bar-input
{
    text-align: center;
    height: 50px;
    width: 150px;
    margin: auto;
}

.search-bar-input:hover
{
    border: solid 2px lightgrey;
    outline: none;
}

.search-history
{
    display: none;
    height: 50px;
    width: 150px;
    background-color: rgb(226, 226, 226);
}

.search-bar-input:hover + .search-history
{
    display: block;
}

.search-history:hover
{
    display: block;
}

Answer №1

Have you experimented with viewing the website on various web browsers and encountered the same outcome? Is your current browser outdated?

Answer №2

Make sure to insert your code snippet while the form is being hovered over, not just when focusing on the input field.

.search-bar-input {
  text-align: center;
  height: 50px;
  width: 150px;
  margin: auto;
}

.search-bar-input:hover {
  border: solid 2px lightgrey;
  outline: none;
}

.search-history {
  display: none;
  height: 50px;
  width: 150px;
  background-color: rgb(226, 226, 226);
}

.search-form:hover+.search-history {
  display: block;
  /* color: red; */
}

.search-history:hover {
  display: block;
}
<div class="search-bar">
  <form class="search-form" autocomplete="off">
    <input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
  </form>
  <div class="search-history">
    search history
  </div>
</div>

Answer №3

If you want to customize it, try this method:

.search-bar-input
{
    text-align: center;
    height: 50px;
    width: 150px;
    margin: auto;
}

.search-bar-input:hover
{
    border: solid 2px lightgrey;
    outline: none;
}


.search-history
{
    display: none;
    height: 50px;
    width: 150px;
    background-color: rgb(226, 226, 226);
}

.search-bar:hover .search-history
{
    display: block;
}
<div class="search-bar">
    <form class="search-form" autocomplete="off">
        <input type="text" class="search-bar-input" name="search-request" placeholder="Type here..." required minlength="4" maxlength="32">
    </form>
    <div class="search-history">
        search history
    </div>
</div>

This will change the behavior of .search-history when you hover over .search-bar.

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

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

I have a lengthy phrase that takes up too much space on mobile devices. Here is an example: .artificial-phone-viewport { width: 320px; height: 500px; border: 1px solid darkgrey; } .container { width: 100%; height: 100%; } .text { /* * Do ...

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

Firefox with Ajax bug bar

I have encountered an issue with my Navbar specifically on Firefox. The problem I am facing is that the Navbar is flickering, constantly growing and shrinking. Interestingly, this issue does not appear when using Chrome or Opera. I'm curious to know ...

The functionality of min-height in CSS seems to be malfunctioning

One of my HTML elements has a parent with the ID #out, and a child with the ID #in. The parent is positioned absolutely, with a minimum height of 100%. It seems to be functioning correctly in most browsers, except when I also set the child's min-heigh ...

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

Is it possible for .php files that don't contain any PHP code to be sent to the interpreter?

Does the PHP interpreter process .php files on a standard LAMP stack even if they do not contain any PHP code? In essence, is there any performance or processing impact in having a .php file without any actual PHP code compared to simply making it an .htm ...

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...

What is preventing my hidden field from being filled by a JavaScript function?

I've recently developed a JavaScript function that generates a specific string required for another form on the website I'm currently working on. Initially, I decided to store this generated value in a hidden field and then submit it within an HT ...

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

The table headers in the second table do not match the queryAllSelector

I've encountered an issue with my JavaScript snippet that displays a responsive table. When I use the snippet for a second table with the same class, the formatting gets messed up on mobile devices (try resizing your screen to see). It seems like the ...

Tips for stopping variables from leaking in JavaScript

I'm currently working on a JavaScript code for my task manager website. Each page has its own JS file, but I've noticed that the data saved in one file seems to leak over to the others. How can I contain these variables so that tasks don't s ...

How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

After inspecting the source code for this website, I noticed a cool feature where the page changes based on your scrolling position. It creates a visually appealing effect. Upon further examination of the source in FireFox, I observed the use of -webkit-t ...

What consequences could occur in HTML if the main tag is not properly enclosed within the body tag?

Just starting out. While working with HTML, I experimented with placing the main tag outside of the body tag instead of nesting it inside as recommended by HTML5 standards. To my eye, both versions looked identical when I viewed the HTML file side by sid ...

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

Tips for ensuring that images fully occupy my carousel slides

I am struggling to make my images fit properly within the slides. Here is the code snippet I have tried along with some screenshots: <div className="relative h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0"> <Carousel showThu ...

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

Getting the Right Value: A Step-by-Step Guide to Setting the Default or Selected Value in

When creating directive form controls (text, select, radio), I am passing a value to the directive function. If this value is not set or empty, then the default value should be taken from the question data._pageAttributes.defaultValue. HTML <div ng-re ...

Seeking feedback: Creating unique HTML markup using PHP, with the option of adding tag prefixes

After working on a PHP class that enables the creation of custom HTML markup similar to FB Markup or EE tags, I am now contemplating enhancing it further. The current functionality is based on tag prefixes like this: <ctag:pagination per_page="20" tota ...