Hovering one item to display the child in another div-CodePudding

I ran into a problem and couldn't find an easy solution. I have a couple of tags which have an img assigned to them and I would like that their respective image is displayed in another div, when I hover over it or click the tag. At the moment the images will be shown, but at the location of the hover tag.

Jquery or Js is also an option :)

EDIT As of now the IMG is shown in the left box and I want to be displayed inside the right box on hover. Preferable would be if it would also work with onClick so it stays when I move my mouse away.

There are multiple images (about 100 different ones)

I will provide some code below

.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 >
  <div >
    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  src="./images/imgf0001.png">
    </figref>
    <figref idref="f0002">
      FIG. 2A 
      <img  src="./images/imgf0002.png">
    </figref>
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
  </div>
  <div > <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>

CodePudding user response：

oen way can be to :

search for the img inside the figRef element
copy the img in the innerHTML of right panel

document.querySelectorAll('figref').forEach(function(fig) {
fig.addEventListener('mouseover', function (e) {
  var target = e.target || e.srcElement;
  document.querySelector('.right').innerHTML = target.querySelector('img').outerHTML;
});
});

.container {
  display: flex;
  width: 100%;
  height: 500px;
}

.left {
  width: 50%;
  height: 500px;
}

.right {
  width: 50%;
  height: 500px;
}

figref img {
  display: none;
}

<div >
  <div >
    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  src="./images/imgf0001.png">
    </figref>
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld   
   <figref idref="f0002">
      FIG. 2A <!--ATM When I hover this the Image is displayed below-->
      <img  src="./images/imgf0002.png">
    </figref>a
  </div>
  <div > <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>

CodePudding user response：

If you put the image under the .right div, the image and the figref are no longer siblings and hence it is not a CSS thing to control the visibility. If the structure is a must, you would need to use javascript. Check the snippet below:

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 >
  <div >
    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 > 
    <img  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>

CodePudding user response：

This can also easily be done with JS as you probably know. To do this with css, you want to make sure the element you want displayed above the parent has the following css:

position: absolute; //ensures position is relative to nearest positioned ancestor
z-index: 2; 
width: 36px;
height: 36px;

Full answer with updated css:

.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 >
  <div >
    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  src="./images/imgf0001.png">
    </figref>
    lorem ipsum delum loresd a sadk kdkas l ldpalo ea ld apsld a
  </div>
  <div > <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>

CodePudding user response：

This can be done manipulating the DOM with Javascript. It would be easier if the image —or a positioning image— is set inside the div where you want it to appear.

The solution can't be done as it is with CSS only, and the Javascript solution depends on your preferences: ¿do you want to use Jquery or do you need to do something more complex?

CodePudding user response：

.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 >
  <div >
    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  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 > <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>