A follow-up question that I didn’t expect to bump into, since I thought the same way should go as smooth as the standalone letters.
The letter ‘W’ is managed to stay black after I click on it and move away my cursor, but once I add some lines at the upper Ws, the line cannot stay black as well with the letters. I tried changing the 2 lines of code in JS, lineX.setAttribute('stroke', '#000000'); to: lineX.stroke = '#000000';, or lineX.style.stroke = '#000000';, or taking it out and form 2 standalone individual addEventListener functions, or even forming another for loop of one addEventListener function in an array = [line1, line2]. All of these methods didn’t work out.
How can I achieve this in either JS or CSS?
const canvas = document.getElementById('canvas');
const text = document.getElementsByClassName('text');
for (let i = 0; i < text.length; i++) {
if (i < 6) {
text[i].addEventListener('mouseover', () => {
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', '66');
line.setAttribute('x2', '100');
line.setAttribute('y1', '93');
line.setAttribute('y2', '93');
line.setAttribute('stroke', '#D3D3D3');
line.setAttribute('stroke-width', '1');
line.setAttribute('id', 'line1');
canvas.append(line);
});
text[i].addEventListener('click', () => {
const line1 = document.getElementById('line1');
line1.setAttribute('stroke', '#000000');
});
text[i].addEventListener('mouseleave', () => {
const line1 = document.getElementById('line1');
line1.remove();
});
}
if (i < 4) {
text[i].addEventListener('mouseover', () => {
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', '66');
line.setAttribute('x2', '100');
line.setAttribute('y1', '86');
line.setAttribute('y2', '86');
line.setAttribute('stroke', '#D3D3D3');
line.setAttribute('stroke-width', '1');
line.setAttribute('id', 'line2');
canvas.append(line);
});
text[i].addEventListener('click', () => {
const line2 = document.getElementById('line2');
line2.setAttribute('stroke', '#000000');
});
text[i].addEventListener('mouseleave', () => {
const line2 = document.getElementById('line2');
line2.remove();
});
}
text[i].addEventListener('click', () => {
text[i].style.opacity = 1;
text[i].style.fill = '#000000';
});
}#paper {
border: 1px solid #000000;
}
#paper #canvas text {
font-family: Sans-serif;
font-size: X-large;
fill: #D3D3D3;
opacity: 0;
cursor: none;
}
#paper #canvas text:hover {
opacity: 1;
}<div id='paper'>
<svg version='1.1' id="canvas" width="595" height="842" xmlns="http://www.w3.org/2000/svg">
<text x="70" y="85.5" class="text">W</text>
<text x="70" y="89" class="text">W</text>
<text x="70" y="92.5" class="text">W</text>
<text x="70" y="96" class="text">W</text>
<text x="70" y="99.5" class="text">W</text>
<text x="70" y="103" class="text">W</text>
<text x="70" y="106.5" class="text">W</text>
<text x="70" y="110" class="text">W</text>
<text x="70" y="113.5" class="text">W</text>
<text x="70" y="117" class="text">W</text>
<text x="70" y="120.5" class="text">W</text>
</svg>
</div>