如何在悬停td时使用css3转换？

Question

我有一个td元素，这是一个链接（使用跨度来覆盖） ，我面临着如何对此进行悬浮过渡效果的问题。 我想要的是在td元素上碰到更高一点的位置。

这是我的html代码：

<td class='page'> 
<h2><a class='grouped_elements' href='#data111' > 
<span>text</span> 
</a></h2> 
</td> 

这是CSS：

.page { 

    width: 195px; 
    height: 150px; 
    position: relative; 
    margin: auto; 
    padding: 15px 0; 
    color: #212121; 


    -webkit-border-bottom-left-radius: 20px 500px; 
    -webkit-border-bottom-right-radius: 500px 30px; 
    -webkit-border-top-right-radius: 5px 100px; 

    -moz-border-radius-bottomleft: 20px 500px; 
    -moz-border-radius-bottomright: 500px 30px; 
    -moz-border-radius-topright: 5px 100px; 

    border-radius-bottomleft: 20px 500px; 
    border-radius-bottomright: 500px 30px; 
    border-radius-topright: 5px 100px; 

    background: #fcf59b; 
    background: 
     -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(#81cbbc), 
      color-stop(2%, #fcf59b) 
     ); 

    background: 
     -moz-repeating-linear-gradient(
      top, 
      #fcf59b, 
      #fcf59b 38px, 
      #81cbbc 40px 
     ); 

    background: 
     repeating-linear-gradient(
      top, 
      #fcf59b, 
      #fcf59b 38px, 
      #81cbbc 40px 
     );  

    -webkit-background-size: 100% 40px; 

    -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); 

    -webkit-transition: margin 0.5s ease-out; 
    -moz-transition: margin 0.5s ease-out; 
    -o-transition: margin 0.5s ease-out; 


} 
.page:before { 
    content: ' '; 
    background: url(tape.png) no-repeat; 
    width: 129px; 
    height: 38px; 
    position: absolute; 
    top: -15px; 
    left: 40%; 
    display: block; 
} 
.page a { 
text-decoration:none; 
} 
.page span { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0; 
    z-index: 1; 
} 

.page:hover { 

margin-top: 10px; 
} 

帮助，我需要帮助的人？

Answer 1

您不能在表格单元格或行上应用除静态以外的边距或position，因此即使您未使用转场，也无法工作。

你需要......

<td> 
    <div class="page"> 
    <h2> 
     <a class='grouped_elements' href='#data111' > 
      <span>text</span> 
     </a> 
    </h2> 
    </div> 
</td> 

从那里调整。