I'm looking to create the following structure:
<div class-name="search">
<input class-name="input"/>
<button class-name="searchbutton> search </button>
</div>
However, I would like the button to initially be hidden. I want the button to appear when I hover over the .search div or when the .input has a value in it. How can I achieve this?
To begin, you can start with:
.input + button {
display:none;
}
.input:hover + button ,.input:valid + button ,.input:focus + button {
display:initial;
}<div class-name="search">
<input class="input" required />
<button class="searchbutton"> search </button>
</div>Now, an update based on a comment:
Hello, I would like to only hide the button, not the input field. Additionally, I want the search div to reveal the button when hovered. Is it possible to achieve this? – Alex K
.input + button {
display:none;
}
.search:hover button {
display:initial;
}<div class="search">
<input class="input" required />
<button class="searchbutton"> search </button>
</div>If you want to hide the search button using the "display" property, you can start by making the button invisible. Here's how you can do it...
<button class-name="searchbutton style="display: none;"> search </button>
After hiding the button, you can make it appear when the user hovers over the search area. This can be achieved with the following code...
.search:hover {
.searchbutton {
display: inline-block;
}
}
Additionally, you can make the button appear when the input field is selected. Here's how you can implement that...
.input {
.searchbutton {
display: inline-block;
}
}
To toggle the visibility of a button using JavaScript, you can utilize a basic event handling technique.
var search = document.querySelector("[class-name=search]");
var searchButton = document.querySelector("[class-name=searchbutton]");
var input = document.querySelector("[class-name=input]");
function showSearchButton() {
searchButton.style.display = "block";
}
function hideSearchButton() {
searchButton.style.display = "none";
}
search.onmouseover = showSearchButton;
input.onchange = showSearchButton;
//Hide the element when the mouse leaves the search area
search.onmouseleave = hideSearchButton;
For styling with CSS, initially hide the button and only show it when hovered over or when the input value changes.
[class-name=searchbutton] {
display: none;
}
It is recommended to use just "class" instead of "class-name" for easier handling of elements.
Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. https: ...
I am delving into the world of PHP as a beginner and still learning the ropes. I tried to replicate a small script exactly from one language to another, but encountered an issue where the index from my HTML file is not being recognized in PHP. The tutorial ...
I have incorporated Google Fonts into my website, along with Bootstrap. Here is the code I am using: .initial { font-size: 1.5em; font-family: 'Euphoria Script', cursive; } p { font-family: 'Open Sans', sans-serif; } <html> ...
Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...
Whenever I attempt to adjust the z-index on my webpage to rearrange the layering of overlapping divs, I always encounter an issue where the lower div becomes unresponsive to mouse events. Currently, my setup includes: <div class="leftcolumn"> <d ...
Is there a way to create a seamless loop between #box2 and #box using this fiddle? I want them to reveal themselves in a continuous loop with infinite scroll. Each time one box fills the frame, the next one should appear in the distance, repeating indefini ...
I have spent a lot of time searching for solutions to pagination issues, but I haven't found a fix for the specific problem I'm facing. While pagination seems to be working correctly in terms of generating links and pages, the navigation links d ...
I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...
I have integrated media queries into my backend (Node) email system to display different content based on whether the email is opened on a phone or desktop. Strangely, the media query works properly when the email is opened in a native app (like Yahoo&apos ...
<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...
I have a question regarding two tables shown below: /* questionnaire table */ | q_id | q_title | | ------- | ---------------------- | | 1 | What is your name? | | ------- | ---------------------- | | 2 | What is your gend ...
There seems to be an issue with the URL redirection. Instead of redirecting to Activated.php, it is currently showing http://localhost/SP/activation.php/Activated.php instead of http://localhost/SP/Activated.php. <?php require 'db.php'; $msg= ...
I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...
Currently troubleshooting my jQuery contact form submission handler. For some reason, the code isn't working as expected and I'm not sure where the issue lies. Upon form submission, there should be a success or error alert displayed, but nothing ...
I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...
I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...
I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...
In my app, I am working on catching routing exceptions. There are three ways in which a user can navigate: If the user types the address directly - this can be caught easily by using { path: '**', redirectTo: 'errorPage'} in the route ...
Currently, I am displaying multiple values from a controller list of objects to a JSP page. Here is an example of how I am doing it: <tr> <td>Name</td> <td>Email</td> <td>Address</td> ...
Imagine you have a website: <div class="formfonttitle">Wireless - General</div> <div style="margin-left:5px;margin-top:10px;margin-bottom:10px"><img src="/images/New_ui/export/line_export.png"></div> <div c ...