Question

当我将鼠标悬停在桌面上时，我正试图进行过渡，这样它就会消失，表中剩下的唯一东西就是桌头。我是转型的新手，所以也许我做错了。我所期待的是桌子身体慢慢上升到0px，但事实并非如此。另外我只需要使用CSS。你能帮助我吗？感谢。

<!DOCTYPE html>
<html>

<head>
  <style>
    thead {
      color: red;
    }
    table,
    th {
      border: 3px solid black;
    }
    tr {
      background: #FFFF66;
    }
    tbody {
      color: blue;
      transition: max-height 2s;
    }
    tbody:hover {
      transition: max-height 2s ease;
      max-height: 0px;
    }
  </style>
</head>

<body>


  <h2>Most Watched Shows:</h2>
  <table width="70%">
    <thead>
      <tr>
        <th>Top 5</th>
        <th>6-10</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
        </td>
        <td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
        </td>
      </tr>
      <tr>
        <td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
        </td>
        <td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
        </td>
      </tr>
      <tr>
        <td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
        </td>
        <td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
        </td>
      </tr>
      <tr>
        <td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
        </td>
        <td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
        </td>
      </tr>
      <tr>
        <td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
        </td>
        <td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 1

我尝试了不同的东西，我为表数据td应用了一个div，它可以工作：D

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    thead {
      color: red;
    }
    table,
    th {
      border: 3px solid black;
      border-collapse: collapse;
    }
    tr {
      background: #FFFF66;
    }
    td {
      border: 1px solid red;
    }
    div {
      transition: max-height 1.5s ease;
      overflow: hidden;
      max-height: 50px;
    }
    table:hover div {
      transition: max-height 2s ease;
      max-height: 0px;
    }
  </style>
</head>

<body>


  <h2>Most Watched Shows:</h2>
  <table width="70%">
    <thead>
      <tr>
        <th>Top 5</th>
        <th>6-10</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <div>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
          </div>
        </td>
        <td>
          <div>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
            <div>
        </td>
      </tr>
      <tr>
        <td>
          <div>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
          </div>
        </td>
        <td>
          <div>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
            <div>
        </td>
      </tr>
      <tr>
        <td>
          <div>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
            <div>
        </td>
        <td>
          <div>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
            <div>
        </td>
      </tr>
      <tr>
        <td>
          <div>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
            <div>
        </td>
        <td>
          <div>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
            <div>
        </td>
      </tr>
      <tr>
        <td>
          <div>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
            <div>
        </td>
        <td>
          <div>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
            <div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

表体CSS过渡

1 个答案: