is there a way to adjust an already defined margin of an element-CodePudding

So i have some elements, on hover i want to adjust their margin-left slightly, however these elements already have their own different predefined margin-lefts (so i want to keep the already defined margins, but only adjust them, but the cascading nature of css does not allow this)

It would be nice if this can be done in css however if not, using an eventListener is probably the best way, i tried doing something like

card.addEventListener("mouseover", (event) => {
  event.target.style.marginLeft = event.target.style.marginLeft - 25   "px";
})

.parent>div {
  width: 100px;
  height: 100px;
  background-color: black;
}

.elem1 {
  margin-left: -100px;
}

.elem2 {
  margin-left: 200px;
}

.parent>div:hover {
  margin-left: -25px;
  /* i want this to only adjust the margin */
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

however this does not seem to work, Anyone got any ideas?

CodePudding user response：

I think You should use :hover on the element in css and then change the values of width and margin-left in it

for example:

div{
        width: 10px;
        margin-left: 23px;
}
div:hover{
             width: 15px;
             margin-left: 18px;
}

Here I used div as an example, Just use your own tag tag and values.

CodePudding user response：

please try this provide your new margins value to hover

.elem1:hover{
       margin-left:-75px; //you adjust it according to your needs
}
.elem2:hover{
       margin-left:175px;
}

You can also try this if there is many elements:- check if it is working or not and let me know

.parent > div:hover {
  margin-left: calc(margin-left - 25px);
}

just do like that hope this will help you ..

CodePudding user response：

Use window.getComputedStyle (detailed in MDN) to work out the left margin in pixels and then subtract your intended margin and add it to the element style property. Because the style property has higher specificity than the css, it overrides it. Use the mouseout to remove it and it defaults to the css value:

window.onload = () => {
  const elements = document.querySelectorAll('div');
  elements.forEach((element) => {
    element.addEventListener('mouseover', doMouseOver);
    element.addEventListener('mouseout', doMouseOut);
  });
}

function doMouseOver(e) {
  const marginLeftShift = -25;
  const style = window.getComputedStyle(e.target);
  const computedMarginLeft = style.marginLeft;
  e.target.style.marginLeft = (parseInt(computedMarginLeft)   marginLeftShift)   'px';
}

function doMouseOut(e) {
  e.target.style.marginLeft = '';
}

div {
  margin-bottom: 0.5rem;
  width: 50%;
}

#one {
  background-color: skyblue;
  margin-left: 25px;
}

#two {
  background-color: pink;
  margin-left: 3rem;
}

#three {
  background-color: coral;
  margin-left: 10%;
}

<div id='one'>One</div>
<div id='two'>Two</div>
<div id='three'>Three</div>

You can use the css transform property but note that won't affect the width or reflow the other elements.

div {
  margin-bottom: 0.5rem;
  width: 50%;
}

div:hover {
  transform:translateX(-25px);
}

#one {
  background-color: skyblue;
  margin-left: 25px;
}

#two {
  background-color: pink;
  margin-left: 3rem;
}

#three {
  background-color: coral;
  margin-left: 10%;
}

<div id='one'>One</div>
<div id='two'>Two</div>
<div id='three'>Three</div>

CodePudding user response：

Try this code for every element of div

.parent > div {
        width: 100px;
        height: 100px;
        background-color: black;
    }

    .elem1 {
        margin-left: -100px;
    }
    .elem2 {
        margin-left: 200px;
    }
    .parent > div:nth-child(1):hover {
        margin-left:calc(-100px   25px) /* for the first child of div */
    }
    .parent > div:nth-child(2):hover {
        margin-left:calc(200px - 25px) /* for the Second child of div */
    }

<div >
    <div ></div>
    <div ></div>
    <div ></div>
</div>

CodePudding user response：

You can adjust the margin of an element using CSS. To do so, you can use the calc() function to specify the new margin value based on the element's current margin and the amount by which you want to adjust it.

For example, if you want to decrease the margin-left of an element by 25 pixels when the element is hovered over, you can use the following CSS rule:

.element:hover {
  margin-left: calc(margin-left - 25px);
}

This rule will adjust the margin-left of the element by decreasing it by 25 pixels, while still maintaining the element's original margin-left value.

Alternatively, you can use JavaScript to adjust the margin of an element. To do so, you can use the offsetLeft property to get the element's current position, and then use this value to calculate the new margin value.

Here is an example of how you can use JavaScript to adjust the margin-left of an element on hover:

card.addEventListener("mouseover", (event) => {
  // Get the element's current position
  const currentPosition = event.target.offsetLeft;

  // Calculate the new margin value based on the element's current position
  const newMargin = currentPosition - 25;

  // Set the element's margin-left to the new value
  event.target.style.marginLeft = newMargin   "px";
})

This code will adjust the margin-left of the element by decreasing it by 25 pixels, while still maintaining the element's original position.