Html 如何在悬停时更改内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19058421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change content on hover
提问by Modelesq
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
我一直在玩这个，我认为这很简单。我要做的是将鼠标悬停在“新”标签上。进入悬停状态后，仅使用 CSS 将内容从“新”更改为“添加”。
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>Here's a JSFiddleto show you what I'm working with.
这是一个JSFiddle向您展示我正在使用的内容。
回答by Sachin
回答by siergiej
This exact example is present on mozilla developers page:
这个确切的例子出现在 mozilla 开发者页面上：
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD"attribute of your HTML tag (which is nice because you can e.g translate it)
如您所见，它甚至允许您创建工具提示！:) 此外，您可以使用content: attr(data-descr);, 并将其存储在data-descr="ADD"您的 HTML 标签的属性中，而不是将实际文本嵌入到您的 CSS 中（这很好，因为您可以例如翻译它）
CSS contentcan only be usef with :afterand :beforepseudo-elements, so you can try to proceed with something like this:
CSScontent只能用于:after和:before伪元素，因此您可以尝试进行以下操作：
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.
CSS :after 伪元素匹配所选元素的虚拟最后一个子元素。通常用于通过使用 content CSS 属性向元素添加装饰性内容。默认情况下，此元素是内联的。
回答by user3668456
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}<span class="label"></span>回答by Ajewole Toluwanimi
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
我刚刚学到的这个小而简单的技巧可能会帮助一些人试图在更改悬停文本时完全避免 :before 或 :after 伪元素（无论出于何种原因）。您可以在 HTML 中添加这两个文本，但会根据悬停改变 CSS 'display' 属性。假设第二个文本“Add”有一个名为“add-label”的类；这里有一点修改：
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
这是关于 codepen 的演示：https://codepen.io/ifekt/pen/zBaEVJ
