Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse.

The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box.

However, when hovering between the 0.8 and 1.0 areas, it behaves erratically whenever I move my mouse.

I want the box to scale to 0.8 when hovering anywhere within the 1.0 area at any point in time. It should return to its original size of 1.0 upon exiting the specific 1.0 region, not any other part. I'm struggling to figure this out on my own.

Test it or see it: https://jsfiddle.net/cyLxLbya/

YouTube Video: https://youtu.be/4MT4hrK7DVE (left is between 0-0.8, right goes crazy between 0.8-1)

htmlcsshover

Answer №1

The issue here lies in the scroll event triggering and blurring while the element is scaling. The problem arises when detecting a :hover state, as the element loses it when it shrinks too much and tries to scale back up again repeatedly. One potential solution is to detect the hover on a parent element that does not undergo scaling. Here's an example: https://jsfiddle.net/cyLxLbya/1/

.box{
    display: inline-block;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75);
    transition: all 200ms ease;
    transition-duration: 0.2s; 
}

.hover:hover .box{
    transform: scale(0.8);
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75);
}

Additionally, it is recommended to move the transition effect to the box itself rather than the hover state of the box.

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

Challenges with border-color and CSS input:focus

The dilemma Currently, I am immersed in a project focusing on constructing a front end using bootstrap4. In order to align with the company's main color scheme, I decided to alter the highlighting color of inputs. To achieve this, I made the followi ...

htmlcssinputbootstrap-4frontend

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

javascripthtmlcssangularjs

Excessive screen height causes the CSS box layout to overflow

I am looking to create a screen layout similar to the one shown in this image. It should consist of a row with no overflow and include: A left box that contains: A fixed height header (20px), An aspect square box taking up the remaining height. ...

cssreactjstailwind-css

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Tips for layering one div on top of another div

I'm looking for guidance on how to position my button divs over my Trapezoids in an overlay fashion. Currently, I have set up an array to store the colors and utilizing the map function to match each button with its corresponding color type. When a ...

javascripthtmlcss

Use jQuery to insert the TEXT heading as an input value

Can anyone help me with copying text from a heading to an input value? Here's an example: <h2 class="customTitleHead">This is a Heading</h2> I want to transfer the text from the heading into an input field like this: <input type="tex ...

javascriptjquerycsshtml

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

javascriptjqueryhtmlajax

Encountering persistent issues while attempting to integrate socket.io into my Node.js application with Express

Recently, I've been exploring ways to create a textbox that allows multiple users to type simultaneously. Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...

htmlnode.jsexpresswebsocketsocket.io

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

CSS navigation bar (background gradient problem)

I have encountered an issue with my multi-tier navigation menu where tiers below tier 1 are displaying an unexpected block to the left of the options. I suspect this problem is related to the background gradient applied, but I haven't been able to fin ...

htmlcss

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

javascripthtmlcssreactjs

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

jqueryhtmlcssscroll

Displaying recorded information from PHP/MySQL dropdown menu

My never-ending problem requires a simple solution. Despite searching online and in books, I can't seem to crack it. My goal is to display results from a drop-down menu that is currently connected to a database/table and showing the l_state as require ...

phphtmlmysql

Unable to locate child after adding element to HTML

I have been attempting to add a child element to my HTML document, and although I can see it in the source code, it doesn't display on the screen as expected. It's quite baffling. Here is the HTML code snippet: <!DOCTYPE html> <html> ...

javascripthtml

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

javascripthtmlcolorshtml5-canvasline

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

htmlcss

Ways to display the modal once the user initiates the action

Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...

javascriptjqueryhtmlangularjs

Struggling to make an AJAX form function properly

I'm running into an issue while setting up a basic AJAX form. My goal is to have a message display on the same page upon successful login using a PHP form through AJAX, but currently, I get redirected to the PHP file after form submission. Can anyone ...

javascriptphpjqueryhtmlajax

Is it possible to retrieve JSON data from an external URL using JavaScript or jQuery?

My goal is to retrieve JSON data from the following URL: I have a button that triggers the function called "jsonplz()", which should display an alert message with the fetched JSON data. This is what my JavaScript code looks like: <script src="htt ...

javascripthtmljqueryjsonajax

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

javascripthtmlajax