Hover-triggered custom toggle

A unique toggle has been designed to function in the following manner:

Essentially, when the user hovers over "All runs", the toggle will appear in place of the word "All". The user can then switch it to "Last N", input a value, and then move the mouse away to view their adjustment.

The toggle has been created and is visible on hover, but there are two issues that need addressing:

  • It is being displayed inline, with the word "All" still showing...the method of hiding this is not clear.

  • Using the toggle becomes challenging as it disappears when attempting to click due to a gap.

SOLUTION FIDDLE.

SOLUTION:

Following the suggestions below, a wrapper div was added to capture the mouseover event.

<div class='wrapper'>
    <div class='runType'>All </div>
    <div class='toggle'>
        <div class='all active'>All</div>
        <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' /></div>   
    </div>
    <div class='runs'>runs</div>
</div>
jquerycss

Answer №1

To make it work, enclose everything in a div and connect the mouseover to that wrapper. Also, include commands to hide the word "All":

<div id='container'>
<div class='allText'>All </div>
<div class='toggle'>
    <div class='all active'>All</div>
    <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' />       </div>   
</div>
<div class='runs'>runs</div>
</div>

JS:

$('#container').mouseover(function() {
$('.toggle').css('display','inline');
$('.allText').hide();
}).mouseleave(function() {
   $('.toggle').hide();
   $('.allText').show()
});

Check out the demonstration here:

http://jsfiddle.net/MeVX8/10/

Answer №2

$('.textContainer').on('mouseover', function() {
$('.details').css('display','inline');
});
$('.details').on('mouseleave', function() {
$('.details').hide();
});


.details:{display:none;}
.details:hover {display:inline;}

Seems to be functioning well, right? http://jsfiddle.net/user123/abcd/efgh/

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

Ways to improve the transition of a <video> background using CSS

My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used: <style> video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; he ...

csshtmlhtml5-video

Are you surrounding a cluster of div tags?

I'm really struggling to understand what this particular step in my textbook is asking for. Here's the exact wording: "Beneath the h2 heading, insert a new line containing a div element with the class value table at the same indent level as the ...

htmlcss

The Ajax request functions flawlessly on Mozilla but encounters issues on Chrome, causing confusion as it occasionally works

I am using a PHP file with a class and function to store data in the database, accessed via AJAX. While everything works smoothly in Mozilla, Chrome seems to be causing some issues. Strangely, sometimes it works fine, but other times it fails for no appare ...

javascriptphpjqueryajaxgoogle-chrome

Modifying ng-model after file selection in a directive

I have a unique directive that is able to detect changes in an input field of type file. When this change occurs, my goal is to then locate another input field and modify its ng-model. The issue I am facing is that I am unable to trigger the model change s ...

javascriptjqueryangularjs

Errors have been observed when using JavaScript variables that begin with the symbol $

For the longest time, I've used JavaScript variable names that begin with $ to signify that they hold jQuery values. For example: $buttons = $( 'button' ); However, a couple of nights ago, I encountered an issue when loading the page in the ...

javascriptjqueryvariablesnaming-conventions

Please input a number in the designated field and specify the step interval without factoring in the value

Imagine a scenario where there is a textbox, and when the user clicks the up arrow, the value in the textbox should increase by 10. To elaborate further, if the initial value in the textbox is 12, pressing the up arrow should change it to 22. Subsequently, ...

javascripthtmljquery

Can you provide tips on generating this JSON within my ASP.Net MVC controller?

I have successfully implemented jqGrid with a multiselect field using the following code in my demo: { name: "Subject", index: "Subject", width: 120, formatter:'select', editable: true, edittype:'select', e ...

jqueryasp.net-mvcjson

Creating a Dynamic Progress Circle in Asp.net Using JQuery and C# for an Engaging

Currently, I have successfully integrated jQuery Progress Circle in my .aspx and it is functioning well on the client side. However, I am now looking to dynamically populate it with server-side values. Javascript : <script> ( function( $ ){ ...

c#jqueryasp.net

Is there a way to show user input text in a typing animation with additional predetermined text?

Using the prompt function, I am gathering input and storing it in variable "a". Here is the code snippet: <script type="text/javascript" language="Javascript"> var a=prompt("Please Enter Your Name ...

javascripthtmlcss

Ensure that the width of the column is limited to the size of its content

Is there a way to set the width of a column in bootstrap based on its content size? I am working with a list of items. The HTML code for this section is as follows: <div class="row"> <div class="col-lg-1 " style="background-color: re ...

csstwitter-bootstrapgridrow

Using cascading dropdowns in an MVC framework to handle null values for multi-select

Within my MVC project, I am facing an issue with a multiselect dropdown list. When the change event is triggered, I am populating another dropdown, but I am unable to retrieve the multiselect values on the controller. Below is the code snippet I am working ...

jqueryajaxasp.net-mvcdrop-down-menumulti-select

Enhance your Fullcalendar experience by seamlessly adding, editing, and resizing events with a success callback, all without the

Is there a way to update events on a calendar without refreshing the page every time a change is made, such as adding a new event, updating an event, changing an event, or dragging a new time or user? Currently, I am using version 5 of FullCalendar. < ...

phpjqueryajaxfullcalendarfullcalendar-5

Guide on deleting a post using AJAX in a Sinatra Ruby application

Currently, I am attempting to utilize AJAX for deleting a post within a straightforward Ruby application on Sinatra. Below is the delete route implementation in my codebase, without incorporating any AJAX request as of yet: delete '/posts/:id' ...

jqueryrubyajaxsinatra

Can someone provide guidance on how to properly format the Jquery Datepicker?

Seeking guidance on how to customize the Jquery datepicker format. My goal is to have it display as dd/mm/yyyy exclusively, but currently, it is showing as mm/dd/yyyy. I attempted this solution without success: $(function() { $( "#datepicker" ...

javascriptjqueryjquery-ui-datepicker

What is the process for determining the overall cost of a column in Angular 9?

I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...

javascripthtmljqueryangular

Gallery of Disappearing Images

I am encountering issues with the image gallery on my website, as it seems to create a space to the right when viewed on screens smaller than 350px. This results in a gap on the entire right side of the page. My goal is to make this image gallery responsiv ...

htmlcsshtml5-canvas

Error in WordPress Toolset Pagination

My issue is straightforward, but I am worried that the solution might not be as simple. I have been developing a website at: This site utilizes WordPress with Avada Theme and Toolset Plugins enabled. The only other plugins in use are BackupBuddy and Cont ...

phpjqueryajaxwordpresspagination

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

javascriptjqueryhtmlcss

Access the JavaScript array within a click function by dynamically generating the array name

Here's a scenario where I have an array like this: var first_array = ['foo','bar','foobar']; My goal is to run a click function that retrieves the array's name and iterates through its elements. The array has an ID ...

javascriptjqueryarrays

Preventing the copying and pasting of HTML ruby tags

I am currently using ruby tags to include pinyin in my text. For instance: <p> <ruby>与<rt>yǔ</rt></ruby><ruby>摩<rt>mó</rt></ruby><ruby>拜<rt>bài</rt></ruby><ruby& ...

javascripthtmlcss