Me enfrento a muchos problemas en mi intento de mostrar la imagen en otro div cuando alguien pasa el cursor sobre un texto. Tengo un menú donde hay una lista de 5 líneas de texto. Quiero mostrar diferentes imágenes en la misma posición para cada paso sobre estas líneas de texto. Logré mostrar imágenes al pasar el mouse con CSS pero desaparecen al dejar de pasar el mouse. Quiero que las imágenes permanezcan después de que un usuario pase el mouse sobre un texto y luego, cuando el usuario pase el mouse sobre otro texto, la imagen relacionada se muestre en la misma posición. También probé con otro diseño, pero no respondía al tamaño del dispositivo.
Aquí está mi código actual:
<p><style> .parent > p:hover:after { width: 5px; content: url(image1.png); position: absolute; z-index: 2; left: 800px; bottom: 8px; } .parent1 > p:hover:after { width: 5px; content: url(image2.png); position: absolute; z-index: 2; left: 800px; bottom: 8px; } .parent2 > p:hover:after { width: 5px; content: url(image3.png); position: absolute; z-index: 2; left: 800px; bottom: 8px; } .parent3 > p:hover:after { width: 5px; content: url(image4.png); position: absolute; z-index: 2; left: 800px; bottom: 8px; } .parent4 > p:hover:after { width: 5px; content: url(image5.png); position: absolute; z-index: 2; left: 800px; bottom: 8px; } </style></p> <div class="parent"> <p style="padding-left: 320px;"><a href="link1"><strong>menuitem1</strong></a></p> </div> <div class="parent1"> <p style="padding-left: 320px;"><a href="link2"><strong>menuitem2</strong></a></p> </div> <div class="parent2"> <p style="padding-left: 320px;"><a href="link3"><strong>menuitem3</strong></a></p> </div> <div class="parent3"> <p style="padding-left: 320px;"><a href="link4"><strong>menuitem4</strong></a></p> </div> <div class="parent4"> <p style="padding-left: 320px;"><a href="link5"><strong>menuitem5</strong></a></p> </div>Lo siento si cometí algún error. Mi conocimiento técnico no es tanto.
La única forma de hacer esto es mediante el uso de JavaScript y la función mouseOver. Establezca la visualización en none y una vez que h1 se desplaza sobre ella, ejecuta la función mouseOver() que establece la visualización de intervalo en bloque (visible). También puede establecer el estado después, como agregar una clase al intervalo, lo que hace que se cierre automáticamente después de un par de segundos.
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over me</h1> <span id="span" style="display:none;">Hey! Click me to close</span> <script> function mouseOver() { document.getElementById("span").style.display = "block"; } function mouseOut() { } window.onclick = function(event) { if (event.target == span) { span.style.display = "none"; } } </script> function setURL(newUrl){ var url=newUrl; return function(){ document.getElementById('picture').setAttribute('src',url); } } document.getElementById('text1').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg')); document.getElementById('text2').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg')); .container{ width:200px; display:flex; margin-left:auto; margin-right:auto; } .container > div{ width:50%; } img{ width:30px; height:30px; } <div class="container"> <div> <p id="text1">picture1</p> <p id="text2">picture2</p> </div><!--END TEXT--> <div> <img id="picture" src=""> </div><!--END PICTURE--> </div><!--END CONTAINER-->