CSS:为什么这个左转换不起作用?

时间:2014-08-06 23:21:39

标签: html css css-transitions

我正在尝试将文字设置为以向左移动。目前文字已经在圈子的时代了,我只想在我将鼠标悬停在它上面时让它进入...

.circle-yellow p
{
 position: absolute;
 top: 42px;
 left: 87px;
  -webkit-transition: left 500ms;
  -moz-transition: left 500ms;
  -ms-transition: left 500ms;
  -o-transition: left 500ms;
  transition: left 500ms;
  font-size: 12px;
  letter-spacing: 1px;
  color: white;
  font-family: "impact";
}

.circle-yellow:hover p 
{
   left:60px;
}

这是HTML

<div class="wrapper">
  <div class="circle-box">
    <div class="circle-yellow" id="js"><p>ARTWORK</p></div>
  </div>
</div>

这是包装器,圆盒和圆黄色的CSS

.wrapper 
{
 position: absolute;
 top: 50%;
 left: 50%;
 width: 500px;
 height: 500px;
 margin-top: -250px; /* Half the height */
 margin-left: -250px; /* Half the width */
}
  .circle-box
  {
   height:100px;
   width:270px;
   display: block;
   margin-left: auto;
   margin-right: auto;
  position: relative;
  margin-top: 100px;
  margin-left: 90px;
  }

 .circle-yellow
 {
   position: relative;
   border-radius: 50%;
   width: 120px;
   height: 120px;
   border-style: solid;
    border-color: #ffbf1e;
   float:left;
 }

http://codepen.io/anon/pen/lKLzg

0 个答案:

没有答案