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

重要的是确保您的布局在悬停时不会改变。实现这一目标的最简单方法是在布局中为所有部件分配一些空间，即使不悬停也是如此。我不确定你想要实现什么样的布局，但这是一个例子：

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

通过为:before伪元素提供一个大小，即使它没有悬停，布局也不应该在内容发生变化时改变。您可能需要针对所需的特定布局调整此值，但一般原则是确保所有与大小相关的属性都指定为而不 :hover，然后仅调整非布局属性（{1}}状态下的（即不影响任何框大小的属性）。

Answer 2

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

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

a:hover

确定！为此使您的背景64px宽度和32 px高度。然后定位你的背景 +--------------+ | | position this background to a +--------------+ | + Add | position this background to a:hover +--------------+

现在将你的背景定位到

a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

当你将鼠标悬停在它上面时如何进行文本更改而不会抽搐？

3 个答案: