时间戳

首页 > 解决方案 > 如何在表格单元格中放置悬停按钮？

html - 如何在表格单元格中放置悬停按钮？

问题描述

我是 css/html 的新手，但我最好打字。希望你能解决我的 html 问题，这个问题现在一直困扰着我，看不到任何解决方案。我正在尝试将 CSS 交叉淡入淡出悬停按钮放置到表格中，因此我可以通过 CSS 定位它。如果有人可以分享建议或示例，我将不胜感激。我将添加下面的代码供您查看。谢谢斯图尔特

body {
    background-color: #575757;
    font-family: Arial;
    font-size: 14px;
    color: #AEAEAE;
}
    #table {
    position: fixed;
    top: 15px;
    left: 15px;
}
    /*......... crossfade on hover .........*/

    #hover img{
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;
}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}
    /*......... crossfade on hover .........*/
</style>
</head>

<body>

<div id="table"><table border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="250" height="60"><div style="position:fixed">
<a id="hover" href="index.htm">
<img src="http://wizzfree.com/pix/button2.png" width="250" height="60" class="nohover">
<img src="http://wizzfree.com/pix/button.png" width="250" height="60" class="hover">
</a>
</div></td>
    </tr>
  </tbody>
</table>
</div>

</body>
</html>

标签： htmlcsshovercell

解决方案

因此，您应该使用按钮组件而不是使用图像。锚标记中的整个部分应该像这样重写：

button {
  border-radius: 50px;
  background-color: gray;
  color: black
}

button:hover {
    background-color: green;
}
<!-- Instead of using <a> and images you should make button -->
<button>SomeButton</button>

边框半径将使您的按钮变圆。

如果您需要详细的动画，您应该使用 css 关键帧、教程和详细信息，您可以在w3school上找到

推荐阅读