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> 

...する必要があり、そこから調整してください。