const text5 = document.querySelector('#p3');
text5.textContent = "Hello World";
div#Can span#Orig {
display: show;
}
div#Can:hover span#Orig {
display: none;
}
div#Can span#p3 {
display: none;
}
div#Can:hover span#p3 {
display: show;
display: inline;
background: linear-gradient(blue , yellow);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: uppercase;
}
<div id="Can">
<p style="font-family: verdana; font-size: 1.25rem; margin-left: 1.25em;"><span id="Orig">This Is Some Text</span><span id="p3"></span></p>
</div>
const text5 = document.querySelector('#p3');
text5.textContent = "Hello World";
const Can = document.querySelector('#Canc');
Can.textContent = '!! No Meeting !!';
div#Can span#Orig {
display: show;
}
div#Can:hover span#Orig {
display: none;
}
div#Can span#p3 {
display: none;
}
div#Can span#Canc {
display: none;
}
div#Can:hover span#p3 {
display: show;
display: inline;
background: linear-gradient(blue , yellow);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: uppercase;
}
div#Can:hover span#Canc {
display: show;
display: inline;
background: linear-gradient(blue , yellow);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: uppercase;
}
<div id="Can">
<p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;"><span id="Orig">This Is Some Text</span><span id="p3"></span></p>
</div>
<div id="Can">
<p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;"><span id="Orig">This Is Some Text</span><span id="Canc"></span></p>
</div>
When I tried this it appear to work but when I tried adding to them they stopped working and when I hovered over them they just dissappeared on my website, but appear correctly when I try them on here.
document.querySelector('#p3')(you omitted the hashtag).