我在单击按钮时给两个 div 相同的样式，但它们的行为不同

Question

我有画布，我可以在其中上传 pdf 文件。单击按钮后，我可以创建 div，其中包含名为 divMark 的图像，我可以将该 div 拖动到画布上。我在哪里创建了缩放功能单击按钮后，我将所有四个边的宽度和高度增加 25 像素，并且我更改了 divMark 左侧和顶部的样式。我存储在数组中的原始坐标我有 xList 顶部坐标和 yList 左坐标和 xList 中的每个值我增加 12 和 yList我减少 5 然后第一个值从每个数组中我给第一个 div 第二个值到第二个 div 等等。

这是用于创建 divMark 和缩放功能的代码：

const myImg = document.getElementById("the-canvas");
const divBtn = document.querySelector(".btn-mark");
const zoomOutBtn = document.querySelector(".zoom-out-btn");
const zoomInBtn = document.querySelector(".zoom-in-btn");
let counter = 0;
let showCounter = 1;

divBtn.addEventListener("click", createContent);
zoomInBtn.addEventListener("click", zoomIn);
zoomOutBtn.addEventListener("click", zoomOut);

function createContent() {
var divMark = document.createElement("div");
divMark.classList = `markers mark`;
divMark.id = `${counter}`;

var img = document.createElement("img");
img.classList = "comment";
img.src = "indeksiraj-1.png";
img.alt = "myimage";

var pCounter = document.createElement("p");
pCounter.classList = "p-counter";
pCounter.innerHTML = showCounter;
divMark.appendChild(pCounter);

divMark.appendChild(img);

$(marksCanvas).append(divMark);
divMarks.push(divMark);

counter++;
showCounter++;

window.onload = addListeners();

function addListeners() {
    divMark.addEventListener("mousedown", mouseDown, false);
    window.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
    window.removeEventListener("mousemove", divMove, true);
}

function mouseDown(e) {
    window.addEventListener("mousemove", divMove, true);
}

function divMove(e) {
    var xCord = e.pageX;
    var yCord = e.pageY;
    divMark.style.top = yCord + "px";
    divMark.style.left = xCord + "px";
    divMark.onclick = function () {
        divContent.setAttribute("style", "visibility:visible;");
        console.log(parseInt(divMark.id));

        let index = parseInt(divMark.id);
        xList = removeXListItem(index, xList);

        xList.splice(parseInt(divMark.id), 0, xCord);
        yList.splice(parseInt(divMark.id), 0, yCord);
    };
}
}

function xCordPlus(num) {
return num + 22;
}

function yCordPlus(num) {
return num + -8;
}

function xCordMinus(num) {
return num - 22;
}

function yCordMinus(num) {
return num + 8;
}

function removeXListItem(index, xList) {
xList.splice(index, 1);
return xList;
}


function zoomIn() {
var currWidth = myImg.clientWidth;
if (currWidth == 1000) return false;
else {
    var currWidth = myImg.clientWidth;
    myImg.style.width = currWidth + 100 + "px";
}
xList = xList.map(xCordPlus);
console.log("xList is: " + xList);
yList = yList.map(yCordPlus);

$(".markers").each(function (index) {
    $(this).css({ top: yList[index] + "px", left: xList[index] + "px" });
});
}



function zoomOut() {
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
if (currWidth == 800) return false;
else {
    var currWidth = myImg.clientWidth;
    myImg.style.width = currWidth - 100 + "px";
}

xList = xList.map(xCordMinus);
yList = yList.map(yCordMinus);

$(".markers").each(function (index) {
    $(this).css({ top: yList[index] + "px", left: xList[index] + "px" });
});
}

我的问题是，当我将两个 divMarks 一个放在画布左侧，另一个放在右侧 divMark 在右侧时效果很好，当我点击 zoomInBtn 怎么做，但右侧的 divMark 效果不佳 它在右侧移动了很多 它不像 divMark 在右侧。

这里是所有代码：https://jsfiddle.net/SutonJ/thernqmv/13/

Answer 1

您正在制作 zoom-out-btn 类，当悬停时，未禁用和激活时，在您发布的那个 jsfiddle 中的 CSS 的第 200 行上，向下移动 html 元素字体大小的 12.5% 的长度.

.zoom-out-btn:not(:disabled):hover:active { 
    transform: scale(1.05) translateY(0.125rem);
}

对于zoom-in-btn，您永远不会这样做。此外，zoom-in-btn 的 css 完全不同，因此如果您希望悬停效果看起来平滑，则需要向该类添加一个过渡属性。