如何将鼠标悬停在一个 function 中的多个元素上

Question

我无法弄清楚如何在我的功能中只显示最后一张图片的情况下将鼠标悬停在每张图片上。

---

这是我的 HTML

<div id = "image">
  Hover over an image below to display here.
</div>
    
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">

这是我的 Javascript

function upDate(previewPic){
  document.getElementById("image").style.backgroundImage = "url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg)";
  document.getElementById("image").innerHTML = "Styling with a Bandana";  
  document.getElementById("image").style.backgroundImage = "url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG)";
  document.getElementById("image").innerHTML = "With My Boy";  
  document.getElementById("image").style.backgroundImage = "url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg)";
  document.getElementById("image").innerHTML = "Young Puppy";  
}


function unDo(){
  document.getElementById("image").style.backgroundImage="url('')";
  document.getElementById("image").innerHTML= "Hover over an image below to display here.";
}

Answer 1

您应该使用onmouseover提供的event来定位您想要的图像。 这是Stackblitz 的复制品，代码如下：

html：

<img
  class="preview"
  alt="Styling with a Bandana"
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
  onmouseover="upDate(event)"
  onmouseout="unDo()"
/>
<img
  class="preview"
  alt="With My Boy"
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
  onmouseover="upDate(event)"
  onmouseout="unDo()"
/>
<img
  class="preview"
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg"
  alt="Young Puppy"
  onmouseover="upDate(event)"
  onmouseout="unDo()"
/>
<hr />
<div id="image" style="display: inline-block">
  Hover over an image below to display here.
</div>

注意在upDate function 中传递的event 。

js：

  // use the event to target the image you want to display
  function upDate(e) {
    // do not repeat yourself, use a variable to store your elements
    let imageDisplay = document.getElementById('image');
    // Get values of the image your are hovering
    var imageInfo = e.target.getBoundingClientRect();

    // Set your values width and height
    imageDisplay.style.width = `${imageInfo.width * 2}px`;
    imageDisplay.style.height = `${imageInfo.height * 2}px`;

    // Set the background and its placement
    imageDisplay.style.backgroundImage = `url(${e.target.src})`;
    imageDisplay.style.backgroundSize = 'cover';

    // Write the text you want
    imageDisplay.innerHTML = e.target.alt;
  }

  function unDo() {
    document.getElementById('image').style.backgroundImage = "url('')";
    document.getElementById('image').innerHTML =
      'Hover over an image below to display here.';
  }

Answer 2

这边走。

• 用 div 对所有图像进行分组
• 使用事件委托

示例代码：

 const imageDisplay = document.querySelector('div#image > img'), previewImages = document.querySelector('div#previews'); previewImages.onmouseover = e => { if (.e.target.matches('img')) return imageDisplay.src = e.target.src } previewImages.onmouseout = e => { if (.e.target.matches('img')) return imageDisplay.src = '' }

 div#image { --szH: 325px; --szW: 288px; position: relative; display: block; width: var(--szW); height: var(--szH); overflow: hidden; background: lightgray; } div#image > * { position: absolute; top: 0; left: 0; } div#image > img { width: var(--szW); height: var(--szH); } div#previews > img { width: 100px; cursor: pointer; } div#image > span { padding: 10px; }

 <div id="previews"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" alt="Styling with a Bandana" > <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" alt="With My Boy" > <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" > </div> <div id="image"> <span>Hover over an image below to display here.</span> <img src="" > </div>