当鼠标悬停在div元素和链接上时，如何更改文本?

Question

这是我现在的代码，我想在鼠标悬停

时写上ADD

.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>

尽我所能

Answer 1

你可以这样做，在这里通过悬停，初始文本将被新的文本所取代。

你必须同时使用.b a:after和.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>

Answer 2

可以这样做:

<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);
}

但我认为更干净的解决方案是使用按钮，如图所示