<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path id="cloud" d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12"></path>
</svg>
<p>SVG <span id="svg_state">is not</span> being interacted with.</p>
<p>Cloud <span id="cloud_state">is not</span> being interacted with</p>
svg {
border: 1px dashed black;
width: 100px;
height: 100px;
}
const svgStateDisplay = document.querySelector('#svg_state');
const cloudStateDisplay = document.querySelector('#cloud_state');
const svgWrapper = document.querySelector('svg');
const cloudPath = document.querySelector('#cloud');
// Add listener directly to SVG path of cloud outline
cloudPath.addEventListener('mouseover', () => {
cloudStateDisplay.textContent = 'is';
});
cloudPath.addEventListener('mouseleave', () => {
cloudStateDisplay.textContent = 'is not';
});
// We can listen on the wrapper SVG element too
svgWrapper.addEventListener('mouseover', () => {
svgStateDisplay.textContent = 'is';
});
svgWrapper.addEventListener('mouseleave', () => {
svgStateDisplay.textContent = 'is not';
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.