有没有办法改变一个＆＃34;锚点＆＃34;一个CSS属性？ （不是元素本身）

Question

因为我不是真实的＆＃34;程序员，如果我写了一些不受欢迎的东西，我道歉。给我负面的点，删除我的帖子，告诉我我是傻瓜，但请回答，我将非常感激：）

我通过更改高度属性来动画这些元素。如您所见，元素的锚点位于其左下角，但属性为＆＃34; height＆＃34;有自己的＆＃34;默认＆＃34;锚点。它可以在元素的底部吗？如果不使用＆＃34; height＆＃34;的负值，我可以做任何事情来实现吗？属性？

＆＃13;

＆＃13;

function onmouseoverOne(){
  document.getElementById("one").style.height = "40px";
};
function onmouseoutOne(){
  document.getElementById("one").style.height = "50px";
};
function onmouseoverTwo(){
  document.getElementById("two").style.height = "40px";
};
function onmouseoutTwo(){
  document.getElementById("two").style.height = "50px";
};
function onmouseoverThree(){
  document.getElementById("three").style.height = "40px";
};
function onmouseoutThree(){
  document.getElementById("three").style.height = "50px";
};

＆＃13;

@charset "utf-8";
*{padding: 0;margin: 0;}
body {
  background-color:white;
}
#container {position:fixed; top:50px; left:100px; width:300px; height:100px; z-index:1;}
#container p{position:absolute; top:100px; left:0px;z-index:3;}
#one {position:absolute; top:50px; left:0px; width:100px; height:50px; background-color:green; z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}
#two {position:absolute; top:50px; left:100px; width:100px; height:50px; background-color:blue;  z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}
#three {position:absolute; top:50px; left:200px;  width:100px; height:50px; background-color:purple; z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}

＆＃13;

<div id="container">
  <div id="one"   onmouseover = "onmouseoverOne()"   onmouseout = "onmouseoutOne()"></div>   
  <div id="two"   onmouseover = "onmouseoverTwo()"   onmouseout = "onmouseoutTwo()"></div> 
  <div id="three" onmouseover = "onmouseoverThree()" onmouseout = "onmouseoutThree()"></div>
  <p>pls mouseover</p>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一张图 http://i.imgur.com/Pf7SzNk.jpg?1

Answer 1

以下是第一个标签的示例（您只需通过更改正确的高度将其应用于其他标签）。

编辑：说明

您要做的是删除height并使用margin-top css属性。计算marginTop = initialHeight - wantedHeight并应用onmouseoverOne()然后onmouseoutOne()重新设置为初始值。

function onmouseoverOne(){  
  document.getElementById("one").style.height = "40px";
  document.getElementById("one").style.marginTop = "10px";  
};

function onmouseoutOne(){
  document.getElementById("one").style.marginTop = "0px";
  document.getElementById("one").style.height = "50px";
};