如何更改悬停时的内容 [英] How to change content on hover

问题描述

我一直在玩这个，我认为这将是很简单。我想做的是将鼠标悬停在NEW标签上。一旦处于悬停状态，只使用CSS将内容从NEW更改为ADD。

  body {font-family：Arial，Helvetica，sans-serif;} item {width：30px;} {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;内容：'NEW'}。item：hover a p.new-label span {display：none;} item：hover a p.new-label {content：'ADD';}  pre> 
 < div class =item> < a href => < p class =label success new-label>< span class =align>新< / span>< / p& < / a>< / div>  
 

a href =http://jsfiddle.net/fLMSd/8/ =nofollow> JSFiddle 来告诉你我在使用什么。

解决方案

CSS content 属性以及 :: after 和 :: before 伪元素已经为此引入。

  .item：hover a p.new-label：{
 content：'ADD'; 
} 
  

JSFiddle Demo

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.

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 JSFiddle to show you what I'm working with.

解决方案

The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.

.item:hover a p.new-label:after{
    content: 'ADD';
}

JSFiddle Demo

这篇关于如何更改悬停时的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！