Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels.

CSS

.myrange::-webkit-slider-thumb{
     position:relative;
     top:-5px;
     appearance:none;
     -webkit-appearance:none;
     -webkit-transition: width 2s, height 4s;
     transition: width 2s, height 4s;
     border-radius:50px;
     background-color:rgb(9,90,0);
     border:0;
     cursor:pointer;
     visibility:hidden;
}

JavaScript

var styleElement = $("<style>", {"type": "text/css"}).appendTo("head");
$('.myrange').hover(function(){
    styleElement.text('.myrange::-webkit-slider-thumb{height:12px; width:12px;}');
});
javascriptjquerycsshtmlcss-transitions

Answer №1

To ensure the styling of the thumb on your range element, remember to include -webkit-appearance: none in the entire range element. Additionally, you can achieve this without using jquery.

.custom-range {
 -webkit-appearance: none; 
 height:10px;
 width:200px;
 background-color:#e3f2fd;
}

.custom-range::-webkit-slider-thumb {
  height: 10px;
  width: 10px;
  background: #33aaff;
  cursor: pointer;
  -webkit-appearance: none;
  transition: height .2s ease-in-out;
}

input[type=range]:hover::-webkit-slider-thumb {
  height: 30px;
}
<input type="range" class="custom-range" value="50">

Answer №2

Here is a solution for you!

$('input').mouseenter(function() {
  $('input').toggleClass('over');
});
$('input').mouseleave(function() {
  $('input').toggleClass('over');
})
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range].over::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
}

/* All the same stuff for Firefox */
input[type=range].over::-moz-range-thumb {
  height: 12px;
  width: 12px;
}

/* All the same stuff for IE */
input[type=range].over::-ms-thumb {
  height: 12px;
  width: 12px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #3071a9;
}
input[type=range].over::-webkit-slider-runnable-track {
  height: 6px;
}
input[type=range].over::-moz-range-track {
  height: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='range'>

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

How can I determine the size of the custom options dropdown in Magento?

I'm facing a challenging issue that I can't seem to crack. It might be because I'm still learning the ropes and struggling with technical jargon. Please bear with me as I try to explain my problem. Here is a summary of what I'm trying ...

phpjavascriptmagento

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

javascriptjqueryhtmlcss

Choosing a Component in a Collection with Angular 2

Seeking advice on how to address an issue I'm facing with a sign-up page. Within the page, there are two buttons, represented by components <btn-gender>, each displaying a gender option for selection. The challenge lies in creating a logic to d ...

javascriptangularionic2

Tips for transferring a JavaScript variable to a Java servlet using the doPost method

I am working with an HTML table that contains dropdowns. When a user clicks on a dropdown, I store the column name and corresponding row (billdate) in a variable. Now, my goal is to pass this variable to my Java servlet's doPost method and then use it ...

javascriptjavajqueryservlets

Incorporate additional form element functionalities using radio inputs

Recently, I created code that allows a user to duplicate form elements and add values by clicking on "add more". Everything is functioning properly except for the radio inputs. I am currently stuck on this issue. Does anyone have any suggestions on how I c ...

javascriptjqueryhtml

Show the Table and Conceal the Overflow

Currently, I am experimenting with creating an Img hover for entertainment purposes. However, I have added some text to my div. In order to center the text beautifully within my div, I utilized the following CSS code: display: table-cell; vertical-align: ...

htmlcssoverflowvertical-alignment

Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image. However, when I try to repeat the ...

htmlcss

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

phpcsscodeigniter

Accessing information from an ASP.NET web service through an Ajax request in AngularJS

UPDATE: included additional methods for clarity enhancement I am attempting to fetch data from an ASP.NET webservice in C# using Ajax calls in AngularJS. The webmethod is structured as follows: [WebMethod] public User getUserByEmail(String Email) ...

c#jqueryasp.netajaxangularjs

Implementing a line break within a JavaScript function specifically designed for formatting images

As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...

javascriptcss

The dynamic table rows are appearing out of order in the DOM

success: function (data, status) { var header = $("#MainDiv"); header.html(null); var headertemplate = $("<table class='searchlistbody'><tr></th><th>Name</th></tr>"); ...

javascriptjqueryajaxhtml-table

Investigate issues with POST data requests

I recently utilized a REST API to send a POST request. Upon clicking on the function addmode(), a textbox is displayed allowing users to input data. However, upon clicking the save() button, an unexpected error occurs and redirects to a PUT Request. Using ...

javascriptangularjs

Ways to navigate to a new webpage in JavaScript without the need to click on a link

After going through various posts and trying different methods, I am still facing challenges. In a PHP page, I have an HTML form with an onClick command that triggers a JavaScript validation procedure when the user clicks a button. While everything funct ...

javascriptphphtml

The CSS property overflow:hidden or overflow:scroll is not functioning as expected when applied to a

On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...

javascriptjqueryhtmlcss

What are the steps to design a curved gauge with a linear-gradient background?

Looking to create a fully responsive gauge using only CSS, ranging from 0-100% with a gradient color transition from green to red. After encountering issues with existing examples, I conducted tests and ultimately developed a solution that somewhat meets t ...

htmlcssborderlinear-gradients

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

Modify properties with checkbox selection utilizing AJAX and jQuery

I am facing a challenge in my Task resource where I need to change the boolean attribute based on whether a checkbox is checked or not. Despite having everything set up and working smoothly before adding this AJAX checkbox, including CRUD operations tested ...

jqueryruby-on-railsajaxcoffeescript

My goal is to prevent users from using the Backspace key within the input field

Let's say we want to prevent users from using the backspace key on an input field in this scenario. In our template, we pass the $event like so: <input (input)="onInput($event)"> Meanwhile, in our app.component.ts file, the function ...

javascriptangulartypescript

Having issues with the POST method in node.js and express when connecting to a MySQL database

My GET method is functioning perfectly I have a database called stage4 and I am attempting to insert values into it from a frontend page The connection is established, I'm using Postman to test it first, but it keeps returning a "404 error" which is ...

javascriptmysqlnode.jsapiexpress

Ways to determine the vertical size of a React component

Currently, I am dynamically generating a list of Symbol(react.element) by utilizing the map function to iterate through an array and incorporate each element's HTML tags. My question is: How can I determine the height of each individual rendered Symbo ...

javascriptnode.jsreactjs