鼠标悬停拆分按钮图像的 HTML 帮助答案

【问题标题】：HTML help for mouseover split button image鼠标悬停拆分按钮图像的 HTML 帮助
【发布时间】：2015-08-11 09:17:40
【问题描述】：

正如我的问题所反映的那样，我是 HTML 的新手，但我需要一些帮助。我有一个表格单元格，其中包含一个按钮，但实际上是两个并排的。我的目标是，当左侧的鼠标悬停在显示图像上方的框中时。当我移动到右边的一个时，会显示另一个。在这两种情况下，鼠标悬停都会显示默认图像。我可以让左半部分完美工作，但似乎无法让右半部分的 HTML 代码正确。为此，请访问 http://www.greensphotoimages.com 并查看“关于 Cori 关于 Ron”按钮并将鼠标悬停在“关于 Cori”上。我在表中使用的代码如下：

非常感谢任何人的帮助！非常感谢。

【问题讨论】：

标签： image split mouseover

【解决方案1】：

我在同一个 span 中放置了两个按钮，并使用 CSS 将它们对齐在一起。例如：

<span class="x-split-button"> <button class="x-button x-button-main"> About Ron</button> <button class="x-button x-button-main">About Cori</button> </span>

我已包含 codepen，因此您可以查看代码和 DEMO

【讨论】：

非常感谢！我需要研究它，因为我之前没有处理过@ABrowBowGeniousCSS。它是否位于标题部分的上方？另外，您能否提供有关我将在何处插入调用图像交换的代码的任何帮助？看看我的网站和最近的更新，希望这会有所帮助。再次感谢。
您将使用与您使用的相同的 JavaScript，只需给每个按钮一个 id，以便 onMouseOver 图像显示。您可以使用 CSS 使上面的代码看起来像您当前设置的按钮。