Adjust the size of multiple elements upon hovering over one of them

I encountered a puzzling issue, and here is a demonstration of my problem: https://jsfiddle.net/k1y8afst/

<div class="Sample">
<div class="Dummy">
<div class="Books">
                                
<a style="width: 14%; margin-left: 1%; margin-right: 1%;">DUMMY 1</a>             
<a style="width: 14%; margin-left: 1%; margin-right: 1%;">SAMPLE 1</a>
                                    
</div>
</div>
<div class="Dummy">
<div class="Prices">
<img src="https://www.lexis.se/wp-content/uploads/2022/01/ARD28940SS-scaled.jpg">

<a style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
DUMMY 2                                   
<a style="width: 14%; margin-left: 1%; margin-right: 1%;" class="">
SAMPLE 2
                                    
</div>
</div>
</div>

Whenever I hover over "Dummy 1," I would like "Dummy 2" to resize in a similar manner. Similarly, "Sample 1" and "Sample 2" should exhibit the same behavior when linked together. I am struggling to find a solution for this interaction. How would you approach this challenge?

htmlcsshovertransformation

Answer №1

From what I know, achieving this effect with just CSS and your current markup is not possible.

However, incorporating some JavaScript can make it relatively simple. Here's an example using jQuery:

$(".single-dummy").hover(
    function () {
        $(".single-dummy").addClass("active");
    },
    function () {
        $(".single-dummy").removeClass("active");
    }
);

All you need is to have an 'active' class defined to apply the desired hover effect. Like so:

.active{
  border: 1px solid red;
}

For a demonstration, check out this working fiddle: https://jsfiddle.net/2mduzg4h/37/

I hope that explanation helps!

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

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance. Currently, my navbar is located below the image but not within it like this: I am looking to achieve so ...

htmlcssangularjsbootstrap-4

Tips for adding an element based on a CSS attribute's value

Is there a way to dynamically adjust the CSS for an element with opacity less than 0? How can I conditionally hide this element if that scenario occurs? if ($('#rounded_items li').css("opacity") < "0"){ $(this).css('display',&ap ...

jquerycssopacity

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image below. Here is my code snippet: ...

htmltwitter-bootstrapcss

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

How to Make Your Site/Content Fade In with jQuery Upon Loading?

Is there a way to add a fade-in effect to a website once it has finished loading, in order to avoid any sudden changes and ensure that the content appears smoothly? It might be simpler if the fading effect is applied only to certain sections, such as head ...

jqueryhtmljquery-pluginsloadfade

Enable highlighting a table border when hovering over it

Is there a way to highlight the boundary of a table row when hovering over it? Something like this: I attempted to use CSS with the following code: .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{ ...

cssreactjsbootstrap-4material-ui

Creating a button within a card: tips and tricks

As I work on designing web sites, I often face challenges. One of my go-to tools is bootstrap, especially when creating card elements. Here is the code I typically use for creating cards: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c ...

cssbuttonbootstrap-4

Chrome behaving differently with CSS for pop-out menu

My issue lies with a pop-out menu behaving differently in Chrome compared to IE or Firefox. Below is the HTML code: <body> <ul> <li><a href="url">Level One</a> <ul> <li><a href="url">Le ...

cssgoogle-chromemenu

Why isn't offsetTop working for a div within a table in HTML and Javascript?

When using the offsetTop property to get the absolute position of an object, it works fine when the objects are outside of tables. However, if the object is inside a table, it always returns 1. Why does this happen and how can it be avoided? To see an exa ...

javascripthtml

Leveraging JavaScript for pricing calculations within asp.net framework

I am currently working with a textbox in a gridview and trying to calculate values using JavaScript. My code seems to be error-free. The goal is to multiply the quantity by the rate to get the total price. function totalise(price, rate, qt) { var qt ...

javascripthtmlasp.netgridviewonblur

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

htmlcsslayoutinternet-explorer-6

The text consistently remains positioned to the right of my image

Photo Gallery Title Issue I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this sc ...

htmlcssphoto-gallery

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

Ways to decrease the width of a outlined material icon

Is there a way to adjust the appearance of this icon to make it appear thinner? I have tried using font-weight and stroke-width without success. .material-icons-outlined, .material-icons.material-icons--outlined { font-family: 'Material Icons Out ...

htmlcssmaterial-uiiconsgoogle-material-icons

What is the best method to incorporate a JavaScript object key's value into CSS styling?

I am currently working on a project in React where I'm iterating over an array of objects and displaying each object in its own card on the screen. Each object in the array has a unique hex color property, and my goal is to dynamically set the font co ...

javascriptcssreactjssassstyling

Generating a .png image using the data received from the client [node]

I need to create a highchart client-side and save a PNG of that chart server-side. After successfully generating the highchart and converting it to a PNG using the following function: function saveThumbnail(graph_name, chart) { canvg(document.getEleme ...

javascripthtml

site with scrolling options in various directions

Someone recently asked me if I could create a multi-directional scrolling website similar to the one found at COS, but using WordPress. At first, I assumed it might be done with Flash, but the source code suggests it could actually be more simple, possibly ...

jqueryhtmlcsswordpressscroll

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

I have been working on the following HTML layout using Bootstrap 4, but I've hit a snag with one element. Check out the design preview below: https://i.sstatic.net/V3tzT.png The HTML code is as follows: <section class="hm_sc_1"> < ...

htmlcssbootstrap-4

Is it possible to eliminate the default placeholder text from Safari browser?

My goal is to design a form that includes date and time input fields. The placeholder text should move up by X pixels when the user clicks on the field. While the form appears fine in Chrome, there seems to be an issue with overlapping form fields in Safa ...

javascripthtmlcsssafaribootstrap-5