懸停一個專案以在另一個div中顯示子項-有解無憂

我遇到了一個問題，找不到簡單的解決方案。我有幾個標簽，它們分配了一個 img，當我將滑鼠懸停在它上面或單擊標簽時，我希望它們各自的影像顯示在另一個 div 中。目前影像將顯示，但在懸停標簽的位置。

Jquery 或 Js 也是一種選擇:)

編輯到目前為止，IMG 顯示在左框中，我希望在懸停時顯示在右框中。如果它也可以與 onClick 一起使用，那么當我將滑鼠移開時它會保持不變。

有多個影像（大約 100 個不同的影像）

我將在下面提供一些代碼

.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>

uj5u.com熱心網友回復：

oen方式可以是：

在 figRef 元素中搜索 img
將img復制到右側面板的innerHTML中

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 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   
   <figref idref="f0002">
      FIG. 2A <!--ATM When I hover this the Image is displayed below-->
      <img class="normal" src="./images/imgf0002.png">
    </figref>a
  </div>
  <div class="right"> <!--Here is where the image should be displayed when I hover the figureref-->
  </div>
</div>

uj5u.com熱心網友回復：

如果將影像放在.rightdiv 下，則影像和 figref 不再是兄弟，因此控制可見性不是 CSS 的事情。如果結構是必須的，則需要使用 javascript。檢查下面的片段：

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>

uj5u.com熱心網友回復：

正如您可能知道的，這也可以使用 JS 輕松完成。要使用 css 執行此操作，您需要確保要顯示在父級上方的元素具有以下 css：

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

更新后的 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 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>

uj5u.com熱心網友回復：

這可以通過使用 Javascript 操作 DOM 來完成。如果影像（或定位影像）設定在您希望它出現的 div 內，會更容易。

該解決方案無法像僅使用 CSS 那樣完成，而 Javascript 解決方案取決于您的偏好：?您想使用 Jquery 還是需要做一些更復雜的事情？

uj5u.com熱心網友回復：

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441187.html

標籤：javascript html jQuery css

上一篇：即使我使用[FromBody]C#從視圖（Ajax）發送請求時在控制器中收到NULL物件

下一篇：當我們在textarea值中添加css時如何驗證css？