2

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

HTML：

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

CSS：

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

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

我希望我的像这个链接上的音乐播放器一样流畅

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

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

4

3 回答 3

2

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

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

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

于 2013-03-18T01:08:16.193 回答
0

正如您提供的那样，该链接悬停在背景图像上，但在您的测试链接中，如果您希望与使用to和to<a>的链接完全相同，那么您之前已经为元素提供了背景图像。background-image: url('image1');abackground-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%;}
于 2013-03-18T02:52:07.230 回答
0

我想我有一个解决办法。诀窍是一件主要的事情：设置文本容器的宽度。我还使用 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。希望这可以帮助！

于 2017-01-12T00:05:52.817 回答