How can I control the direction of a CSS change when hovering using JavaScript?

When you hover over the green section in the code snippet below, the height of the two red boxes will change. However, the height currently expands downwards. Is there a way to make the height expand upwards instead?

CSS:

.one{
    position: absolute; 
    left: 110px; 
    top: 0px; 
    background: green;
}

.two {
    position: absolute; 
    left: 70px; 
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px;
}

.three {
    position: absolute; 
    left: 200px;
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px;
}

HTML:

<div class="one">15,000,000</div>
<div class="two">700</div>
<div class="three">800</div>

Javascript:

$('.one').mouseover(function(){
   $('.two, .three').css('height','50px');
}).mouseout(function(){
    $('.two, .three').css('height', '25px');
  });

Answer №1

Make a simple adjustment to the position of the boxes:

$('.one').hover(function(){
   $('.two, .three').css({ height : '50px', top: '15px'});
}).mouseout(function(){
    $('.two, .three').css({ height : '25px', top: '40px'});
  });

http://jsfiddle.net/wyxJ7/12/

Answer №2

Check out this link for a solution: http://jsfiddle.net/Gbwjj/

The problem seems to be related more to CSS than JavaScript in this case.

Answer №3

To create the illusion of height expanding upwards, you can modify the 'top' css attribute simultaneously. The following code snippet utilizes animate() to demonstrate this effect:

 $('.one').mouseover(function(){
    $('.two, .three').animate({
        height:"50px",
        top:"-=25"
    });
}).mouseout(function(){
    $('.two, .three').animate({
        height:"25px",
        top:"+=25"
    });
  });

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

Adjusting the scope value directly within a directive

I have a validation message that starts off hidden when the page loads due to the ng-show attribute. When the user clicks to delete an entry, the confirmation message for successful deletion appears by changing the ng-show value to false. Now, I need to h ...

Enhance Your Website with Bootstrap 5 Slider/Carousel for Product Showcase

I am attempting to create a slider/carousel of products similar to the image shown below using Bootstrap 5: https://i.sstatic.net/7FhPw.png Here is the current code I have: <style> <!-- Temporary --> .carousel-control-next-icon { bac ...

What is the best method for inserting CSS into a webpage using a Chrome extension?

I am seeking guidance on how to incorporate CSS into a webpage using a Chrome extension. The CSS code I am attempting to inject is as follows: body { background: #000 !important; } a { color: #777 !important; } Here is the content of my manifest.j ...

Breaking a string into separate parts using various layers of delimiters

I am currently facing an issue with this specific string: {1 (Test)}{2 ({3 (A)}{4 (B)}{5 (C)})}{100 (AAA{101 (X){102 (Y)}{103 (Z)})} My goal is to divide it using { as the initial delimiter and } as the final delimiter. However, there are nested brackets ...

Exploring the depths of Node.js and intrigued by its scope

Currently, I'm engrossed in an ebook titled "The Node Beginner Book." It essentially consists of one extensive exercise spanning around 50 pages, covering a wide range of basics. Lately, I've been immersed in Python and have a background in PHP. ...

Making changes to a variable within a Service

Hey there! I've been stuck on this code all day and could really use some help. I have a simple textbox that interacts with a controller to update a variable inside a service (which will eventually handle data from elsewhere). Currently, I can retri ...

Problems with Arrays in Google Apps Script

I'm currently developing an apps script that loads XML data into a function and parses it based on user input. The XML structure is fairly simple: <?xml version="1.0" encoding="UTF-8"?> <Records> <Record> <username&g ...

Retrieve the value of a JavaScript variable

Currently, I am working on developing a web application that utilizes the Google Maps Direction API. Within a variable named summaryPanel.innerHTML, I store essential details about addresses and distances. I need to utilize the distance data for additional ...

Managing the creation of a fresh VueJs object with checkboxes enabled for CRUD operations

Hello fellow developers! I am currently working on a shop card project and I'm looking to add a new product to the collection of sale elements. Let's consider the JSON structure retrieved from the backend: "products": [ { "product_prov ...

Tips on customizing the color of checkboxes in a ReactJS material table

I'm working on a project that involves using the Material table, and I need to change the color of the checkbox when it's selected. Can anyone help me with this? https://i.stack.imgur.com/JqVOU.png function BasicSelection() { return ( <M ...

Tips for creating text that adjusts to the size of a div element

I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow ou ...

What is the best way to pass an input value into a function when a form is submitted in Angular 6?

When I press enter, my code works perfectly and the performSearch function runs successfully. However, when I attempt to run the function by clicking the submit button, I encounter the following error: Error: cannot read property of undefined This is m ...

Display the component only if the image source is legitimate

Before rendering an Image component, I want to ensure that the URL is valid and not broken. My current approach seems error-free and the onload function is functioning properly. However, I suspect there might be an issue with how I am handling the return ...

Activate and deactivate button

I've tried multiple examples on this site for enabling and disabling a button using javascript with jquery, but none of them seem to work for me. Here is my current dilemma: <asp:TextBox ID="mytext" runat="server" onkeyup="enableButton(this, 3)"/ ...

What value does a variable have by default when assigned to the ko.observable() function?

I am in the process of learning KnockoutJS and I have implemented code for folder navigation in a webmail client. In the view code, there is a comparison being made to check if the reference variable $data and $root.chosenFolderId() point to the same memor ...

How to manage a particular process ID in Node.js?

I am currently working on a node application that allows clients to control a program running on the server. The program needs to run in its own terminal window at all times. Here is the ideal scenario: When a client clicks a button, a command is executed ...

Action of Submit Button Based on Field Matching Another Form

I currently have a single page that contains two forms, with only one form being displayed at the moment. The concept is that if the user selects a specific state from the drop-down menu and clicks on the submit button, they will be redirected to either a ...

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

Currently, I am utilizing MUI's Menu / MenuItem to create a menu of missions / tasks similar to the screenshot below: https://i.sstatic.net/6FGrx.png The MenuItem is interactive: // ... other code <MenuItem value={mission.issu ...

JavaScript Class vs Function as Definition

Having trouble locating documentation for this issue. I devised a JavaScript class in the following manner: class Polygon { constructor(height, width) { this.height = height; this.width = width; } area = function() { return this.height ...

The error message "TypeError: null is not an object (evaluating 'user.uid')" is commonly encountered in React Native when trying to access a

When I pulled the user.uid from the AuthContext using useContext, I encountered an error. Essentially, I want to allow the logged-in user to delete a shared post only if the userID matches the logged-in user's ID. However, when comparing user.uid == p ...