相关疑难解决方法(0)

如何在悬停时更改内容

我一直在玩这个,我觉得这很简单.我想要做的是将鼠标悬停在"新"标签上.一旦处于悬停状态,仅使用CSS将内容从"NEW"更改为"ADD".

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';
}
Run Code Online (Sandbox Code Playgroud)
<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>
Run Code Online (Sandbox Code Playgroud)

这是一个 …

html css css3

32
推荐指数
4
解决办法
11万
查看次数

标签 统计

css ×1

css3 ×1

html ×1