Me encontré con un problema y no pude encontrar una solución fácil. Tengo un par de etiquetas que tienen un img asignado y me gustaría que su imagen respectiva se muestre en otro div, cuando paso el mouse sobre él o hago clic en la etiqueta. En este momento se mostrarán las imágenes, pero en la ubicación de la etiqueta flotante.
Jquery o Js también es una opción :)
EDITAR A partir de ahora, la IMG se muestra en el cuadro de la izquierda y quiero que se muestre dentro del cuadro de la derecha al pasar el mouse. Sería preferible que también funcionara con onClick para que permanezca cuando alejo el mouse.
Hay varias imágenes (alrededor de 100 diferentes)
Voy a proporcionar un código a continuación
.container { display: flex; width: 100%; height: 500px; } .left { width: 50%; height: 500px; } .right { width: 50%; height: 500px; } figref:hover img { visibility: visible; display: block; box-shadow: 2px 2px 4px black; } figref img { display: none; } <div class="container"> <div class="left"> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a <figref idref="f0001"> FIG. 1A <!--ATM When I hover this the Image is displayed below--> <img class="normal" src="./images/imgf0001.png"> </figref> <figref idref="f0002"> FIG. 2A <img class="normal" src="./images/imgf0002.png"> </figref> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a </div> <div class="right"> <!--Here is where the image should be displayed when I hover the figureref--> </div> </div> .container { display: flex; width: 100%; height: 500px; } .left { width: 50%; height: 500px; } .right { width: 50%; height: 500px; } figref img { display: none; position: absolute; max-width:400px; border:8px solid #fff; border-radius:6px; } figref:hover img { display: inline-block; box-shadow: 2px 4px 35px rgba(0,0,0,0.5); animation-name: example; animation-duration: 1s; } @keyframes example { 0% {opacity:0;box-shadow: 0px 0px 10px rgba(0,0,0,0.5);} 40% {opacity:1;box-shadow: 0px 0px 10px rgba(0,0,0,0.5);} 100% {opacity:1;box-shadow: 2px 4px 35px rgba(0,0,0,0.5);} } figref{ font-weight:800; } figref:hover { color:#52f; } <div class="container"> <div class="left"> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a <figref idref="f0001"> FIG. 1A <!--ATM When I hover this the Image is displayed below--> <img class="normal" src="https://api.heinsoe.com/v3/portfolio/storage/20200101/zmt.jpg"> </figref> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a </div> <div class="right"> <!--Here is where the image should be displayed when I hover the figureref--> </div> </div>Si coloca la imagen debajo del div .right , la imagen y el figref ya no son hermanos y, por lo tanto, no es una cuestión de CSS controlar la visibilidad. Si la estructura es imprescindible, deberá usar javascript. Revisa el fragmento a continuación:
document.querySelector('figref').addEventListener('mouseenter', function(){ document.querySelector('.right > img').style.display = 'block' }) document.querySelector('figref').addEventListener('mouseleave', function(){ document.querySelector('.right > img').style.display = 'none' }) .container { display: flex; width: 100%; height: 500px; } .left { width: 50%; height: 500px; } .right { width: 50%; height: 500px; } .right > img { display: none; } figref:hover { color: red; } figref:hover + .right > img { display: block; box-shadow: 2px 2px 4px black; } <div class="container"> <div class="left"> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a <figref idref="f0001"> FIG. 1A </figref> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a </div> <div class="right"> <img class="normal" src="https://images.unsplash.com/photo-1646864052090-071a579e1346?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"> </div> </div>.
Esto también se puede hacer fácilmente con JS, como probablemente sepa. Para hacer esto con css, debe asegurarse de que el elemento que desea que se muestre sobre el padre tenga el siguiente css:
position: absolute; //ensures position is relative to nearest positioned ancestor z-index: 2; width: 36px; height: 36px;Respuesta completa con css actualizado:
.container { display: flex; width: 100%; height: 500px; } .left { width: 50%; height: 500px; } .right { width: 50%; height: 500px; } figref:hover img { visibility: visible; display: block; position: absolute; width: 36px; height: 36px; z-index: 2; box-shadow: 2px 2px 4px black; } figref img { display: none; } <div class="container"> <div class="left"> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a <figref idref="f0001"> FIG. 1A <!--ATM When I hover this the Image is displayed below--> <img class="normal" src="./images/imgf0001.png"> </figref> lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a </div> <div class="right"> <!--Here is where the image should be displayed when I hover the figureref--> </div> </div>