How to change content on hover

Question

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    x000D   x000D  body  x000D      font-family  Arial  Helvetica  sans-serif  x000D    x000D   item  x000D      width  30px  x000D    x000D  a  x000D      text-decoration none  x000D    x000D   label   x000D      padding  1px 3px 2px  x000D      font-size  9 75px  x000D      font-weight  bold  x000D      color   ffffff  x000D      text-transform  uppercase  x000D      white-space  nowrap  x000D      background-color   bfbfbf  x000D      -webkit-border-radius  3px  x000D      -moz-border-radius  3px  x000D      border-radius  3px  x000D      text-decoration  none  x000D    x000D   label success   x000D      background-color   46a546  x000D    x000D   x000D   item a p new-label span  x000D    position  relative  x000D    content   NEW  x000D    x000D   item hover a p new-label span  x000D    display  none  x000D    x000D   item hover a p new-label  x000D    content   ADD   x000D    x000D   lt div class  item  gt  x000D       lt a href    gt  x000D            lt p class  label success new-label  gt  lt span class  align  gt New lt  span gt  lt  p gt  x000D       lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Here s a JSFiddle to show you what I m working with

User · Answer

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:

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

User · Answer

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

User · Answer

This exact example is present on mozilla developers page     after  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   CSS content can only be usef with  after and  before pseudo-elements  so you can try to proceed with something like this    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

User · Answer

x000D   x000D   label after  x000D      content  ADD   x000D    x000D   label hover after  x000D      content  NEW   x000D    x000D   lt span class  label  gt  lt  span gt  x000D   x000D   x000D

[html] How to change content on hover

Examples related to html

Examples related to css