Как поправить скрипт, чтобы размер картинок при наведении в процентах не просто увеличивался, а прибавлялся к существующему?

Question

Вот скрипт при наведении меняется размер картинки, как сделать, чтобы к размеру картинки в процентах просто прибавлялось значение процентов, например +10%?

<script>
    window.onload = function(){
        var image = document.getElementsByClassName("image7");
        var maxWidth = "60%";
        var minWidth = "56%";
        var i2;
        for (i2 = 0; i2 < image.length; i2++) {
            image[i2].onmouseover = function(){
                this.style.width = maxWidth;
            };
            image[i2].onmouseout = function(){
                this.style.width = minWidth;
            };
        }
    };
</script>

Answer 1

Умножение на 1.1 - это и есть "плюс 10%".

let image = document.querySelectorAll(".image7");
let size = 30;

for (let i = 0; i < image.length; i++) {
  image[i].onmouseover = function() {
    this.style.width = size * 1.1 + "%";
  };

  image[i].onmouseout = function() {
    this.style.width = size + "%";
  };
}

img {
  width: 30%;
  vertical-align: top;
}

<img class="image7" src="https://picsum.photos/100/100?random=1">
<img class="image7" src="https://picsum.photos/100/100?random=2">
<img class="image7" src="https://picsum.photos/100/100?random=3">

Но это делается сильно проще на CSS:

.image7 {
  width: 25%;
  margin: 10px;
  transition: 0.1s linear;
}

.image7:hover {
  transform: scale(1.1);
  cursor: pointer;
}

<img class="image7" src="https://picsum.photos/100/100?random=1">
<img class="image7" src="https://picsum.photos/100/100?random=2">
<img class="image7" src="https://picsum.photos/100/100?random=3">

БЛОГ НА HUSL

Как поправить скрипт, чтобы размер картинок при наведении в процентах не просто увеличивался, а прибавлялся к существующему?

Ответы (1 шт):