0

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.

2
  • Welcome to StackOverflow! Please insert a runnable code snippet in your question. Commented Mar 29, 2024 at 16:58
  • As I guess from your CSS code, it should be document.querySelector('#p3') (you omitted the hashtag). Commented Mar 29, 2024 at 17:01

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.