当您将鼠标悬停在文本上而不抽动时，如何更改文本？

Question

据我了解，CSS 可用于以基本方式更改:hover 上元素的内容。我正在使用此代码

HTML：

<button><span>3 replies</span></button>

CSS：

button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

但是当我将鼠标悬停在按钮上时，它抽搐得很厉害

我希望我的像this link的音乐播放器一样流畅

当您将鼠标悬停在lease、premium 或trackout 价格下的按钮之一时，它们会切换到+add 文本

这是我的播放器的一部分http://djwckd.com/test

Answer 1

我想我有一个解决办法。诀窍是一件主要的事情：设置文本容器的宽度。我还使用 onmouseenter 而不是 onmouseover 来更快地更改文本（我的理论认为 onmouseenter 比 onmouseover 更快）。这是一个例子：

var videoplayer = {
    text: "<b>Hello World</b>",
    author: "(you)"
  }

<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>

只需确保将 div 的宽度设置为所需的宽度即可。 （如果您不想要背景，只需将背景颜色：红色部分更改为背景颜色：透明）。还有一件事：您必须使用 div 或其他容器，并将 display:block 设置为默认值。我建议使用 div。希望这会有所帮助！

Answer 2

正如您提供的链接悬停在背景图片上，但在您的测试链接中，您之前已将背景图片提供给 <a> 元素，如果您想要与链接完全相同，请使用 background-image: url('image1'); 到 a 和 background-image: url('image2'); 到a:hover.

您仍然可以使用定位背景图像，为此您应该像这样。

+--------------+
|              |    position this background to a
+--------------+
|    + Add     |    position this background to a:hover
+--------------+

好的！为此，使您的背景宽度为 64 像素，高度为 32 像素。 然后将您的背景定位到 a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}

现在将你的背景定位到

a:hover{background-position: 0% 0%;}

Answer 3

重要的是确保您的布局不会在悬停时发生变化。实现这一点的最简单方法是在布局中为所有部分分配一些空间，即使在不悬停时也是如此。我不确定您要实现哪种布局，但这里有一个示例：

button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}

通过给:before 伪元素一个大小，即使它没有悬停，布局也不应该在内容改变时改变。您可能需要针对您想要的特定布局进行调整，但一般原则是确保指定所有与大小相关的属性没有 :hover，然后只调整非布局属性（即即，不影响任何框大小的属性）处于:hover 状态。