I'm trying to display text with the :hover selector which on the layout would show (B) text replacing (A) text after mousing over (A) text all without the use of JavaScripit. Below is the code which is my attempt at accomplishing this.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>textchangetoOthertextonhover</title>
<meta charset="UTF-8" />
<style>
div {
visibility: hidden;
float: left;
z-indez: -1;
}
div.showAltTXT:hover {
visibility: visible;
z-index: 2;
}
p.hideTXT:hover {
visibility: hidden;
float: left;
}
</style>
</head>
<body>
<p class="hideTXT">Alpha text.</p>
<div class="showAltTXT">
<p>Bravo text.</p>
</div>
</body>
</html>
I'm very new to html and css so perhaps it may be something simple that I'm missing.
Btw, the result of this code displays all elements to be hidden after mouseover. Would not show (B) text.