Как вы, вероятно, можете сказать, CSS - это путь для этого, но, как говорится, если вы хотели сделать это с помощью javascript, вы могли бы использовать что-то вроде этого:
HTML
<html>
<head>
<title>Image/Text Switching</title>
</head>
<div>
<h1>
Image/Text Switching
</h1>
<div>
<div id="container">
<img id="imgToReplace" src="https://via.placeholder.com/150"/>
<div id="textContainer"></div>
</div>
</div>
</div>
</html>
JS
var replacementText = "Home";
var imgElement = document.getElementById('imgToReplace');
var textContent = document.createTextNode(replacementText);
var textContainer = document.getElementById('textContainer');
var container = document.getElementById('container');
container.addEventListener("mouseover", function(){
imgElement.style.display = "none";
textContainer.appendChild(textContent);
});
container.addEventListener("mouseout", function(){
imgElement.style.display = "unset";
textContainer.innerHTML = "";
});
CSS
#container{
border: 1px solid black;
display: inline-block;
min-height: 150px;
min-width: 150px;
}
Одна оговорка с этимподход заключается в том, что элемент #textContainer и элемент #imgToReplace должны иметь одинаковую высоту и ширину.Если вы решили пойти по этому пути, возможно, используйте js, чтобы установить высоту и ширину созданного элемента #textContainer.
Скрипку можно найти здесь .