Question

我是CSS / HTML的新手，但请尽我所能。希望您能解决我的html问题，这是我永远无法解决的问题。我尝试将CSS淡入淡出悬浮按钮放置到表中，以便可以通过CSS放置它。如果有人可以分享建议或示例，我将不胜感激。我将在下面添加代码以供您签出。斯图尔特（Thx Stewart）

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>

Answer 1

这是您要找的吗？

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" style="position: relative;"><div style="position:absolute; top: 0; left:0;">
<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>

Answer 2

因此，在使用图像时，应该使用按钮componenet。锚标记中的整个部分应使用类似以下的方式重写：

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上找到

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

2 个答案: