How do I change the text when hovering over a div element and link-CodePudding

This is my code for now, Id like it to say ADD when hovering

.b:hover {
    background:  white;
    color:rgb(180, 179, 179) ;
}
 
.b:hover a {
    background:white;
    color: rgb(180, 179, 179);
}
.b a {
    display:inline-block;
    width: 98%;
}

<div id="b1"; class = b>
    <a href="test.html">9.99€</a>
</div>

tried everything that i know off

CodePudding user response：

You can achieve that like this, here by hovering, the initial text will be replaced by the new text.

You have to use both .b a:after and .b a:hover:after.

.b:hover {
    background:  white;
    color:rgb(180, 179, 179) ;
}
.b a:after {
    content: '9.99€';
}
.b a:hover:after {
  content: "new Text"
}

<div id="b1"; class ="b">
    <a href="test.html"></a>
</div>

CodePudding user response：

It is possible to do so like this:

<div id="b1"; class = b>
    <a href="test.html"></a>
</div>

.b a {
    display:inline-block;
    width: 98%;
}

.b a:after {
    content:'9.99€';
}

.b a:hover:after {
    content:'ADD';
    background:white;
    color: rgb(180, 179, 179);
}

But I think cleaner solution is to use button as shown here