有谁知道为什么我的变换比例CSS不起作用？

Question

我用 JavaScript 编写了一个函数来放大按钮并立即缩小到原始大小。

\n\n

它可以使用其他 CSS 属性来工作。例如，我已将颜色更改为蓝色，这按预期工作。

\n\n

有谁知道为什么它对转换不做同样的事情？

\n\n

提前致谢！:)

\n\n

\r\n

\r\n

var btnE = document.querySelector(".btn-e");\r\n\r\nbtnE.addEventListener(\'mouseover\', function() {\r\n  btnE.classList.add("btn-eScript")\r\n})\r\nbtnE.addEventListener("transitionend", function() {\r\n  btnE.classList.remove("btn-eScript")\r\n})

\r\n

.btn-e {\r\n  margin-left: 155px;\r\n  background-color: rgba(83, 155, 232, 0.9);\r\n}\r\n\r\n.btn-s {\r\n  margin-left: 120px;\r\n  background-color: rgb(236, 130, 139);\r\n}\r\n\r\n.btn-s,\r\n.btn-e {\r\n  text-decoration: none;\r\n  color: white;\r\n  font-size: 90%;\r\n  font-weight: 100;\r\n  text-align: center;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n  transition: 0.15s;\r\n}\r\n\r\n.btn-eScript {\r\n  color: blue;\r\n  transform: scale(1.5);\r\n}

\r\n

<div class="btns">\r\n  <a class="btn-s" href="#">M\xc3\xa1s demos</a>\r\n  <a class="btn-e" href="#">M\xc3\xa1s demos</a>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

您需要向按钮添加显示属性：

\n\n

.btn-s,\n.btn-e { display: inline-block; } \n

\n\n

http://jsfiddle.net/5dhjLm80/

\n\n

\r\n

\r\n

.btn-s,\n.btn-e { display: inline-block; } \n

\r\n

var btnE = document.querySelector(".btn-e");\r\nbtnE.addEventListener(\'mouseover\', function() {\r\n    btnE.classList.add("btn-eScript")\r\n})\r\nbtnE.addEventListener("transitionend", function() {\r\n    btnE.classList.remove("btn-eScript")\r\n})

\r\n

.btn-e {\r\n    margin-left: 155px;\r\n    background-color: rgba(83,155,232,0.9);   \r\n}\r\n\r\n.btn-s {\r\n    margin-left: 120px;\r\n    background-color: rgb(236, 130, 139);\r\n\r\n}\r\n\r\n.btn-s,\r\n.btn-e {\r\n    text-decoration: none;\r\n    color: white;\r\n    font-size: 90%;\r\n    font-weight: 100;\r\n    text-align: center;\r\n    padding: 10px 20px;\r\n    border-radius: 25px;\r\n    transition:  0.15s;\r\n    display: inline-block;\r\n}\r\n\r\n.btn-eScript {\r\n      color: blue;\r\n      transform: scale(1.5);\r\n}

\r\n

\r\n

\r\n

\n