将鼠标悬停在文本上以在固定位置显示图像

Question

我是 HTML、CSS 和 Javascript 的新手。一段时间以来，我一直在寻找与Harvard school of design 相同的网站设计，但在互联网上进行了大量搜索后，我只能找到这个结果change links with images

$('#thumbs img').hover(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

$('#thumbs2 a').hover(function(){
   $('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});

$('#thumbs3 a').hover(function(){
   $('#largeImage3').attr('src',this.getAttribute('data-swap'));
});

#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

//WITH IMAGE LINKS </br><hr></br>
<div id="gallery"> 
    <div id="panel"> 
        <img id="largeImage" src="http://placehold.it/100" /> 
        <div id="description">main image with image links</div> 
    </div> 

    <div id="thumbs"> 
       <img src="http://placehold.it/100/ee55ee" alt="1st image description" />
       <img src="http://placehold.it/100/080" alt="2nd image description" />
       <img src="http://placehold.it/100/ff6" alt="3rd image description" />
       <img src="http://placehold.it/100/ff3322" alt="4th image description" />
    </div> 
</div> 
</br><hr></br>
    //WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2"> 
    <div id="panel"> 
        <img id="largeImage2" src="http://placehold.it/100/" /> 
        <div id="description">main image with simple links</div> 
    </div> 

    <div id="thumbs2">
        <a href="http://placehold.it/100/ff3322" >link1</a>
         <a href="http://placehold.it/100/ffc5c5">link1</a>
        <a href="http://placehold.it/100/eec777">link1</a>
        <a href="http://placehold.it/100/887744">link1</a>
    </div> 
</div> 
 </br><hr></br>
    //WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3"> 
    <div id="panel"> 
        <img id="largeImage3" src="http://placehold.it/100/" /> 
        <div id="description">main image with simple links</div> 
    </div> 

    <div id="thumbs3"> 
        <a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
         <a href="#" data-swap="http://placehold.it/100/ffc5c5">link1</a>
        <a href="#" data-swap="http://placehold.it/100/eec777">link1</a>
        <a href="#" data-swap="http://placehold.it/100/ff88ee">link1</a>
    </div> 
</div>

这并不是很理想。我在this网站上得到的结果真的是我很期待。作为前端技术的新手，很难实现这一目标。非常感谢您的帮助。

Answer 1

查看了问题中引用的代码，我想知道一些更简单的东西是否就足够了。

特别是，似乎真的不需要 jquery，在使用库之前对“原始”Javascript 有一个基本的了解可能很有用。

这个sn-p特意做了极少的样式，只是为了展示基本的JS。 更新 为了使到悬停元素的过渡更平滑，所有图像都已加载开始。它们存储在 bigImage 元素中，因此可以使用 CSS 显示它们的偏移量并根据需要将它们移入和移出。这段代码只是在悬停事件上显示图像所需的基本内容。

  

<!-- begin snippet: js hide: false console: true babel: false -->

    #container div.bigImage {
      display: inline-block;
    }
    .bigImage img {
      display: none;
    }

    #container ul {
      list-style: none;
      width: auto;
      float: left;
      margin: 2vw;
    }

    #container ul li {
      width: auto;
    }

    #container ul li a {  
      text-decoration: none;
    }
    
 .bigImage img.show {
   display: block;
   }

    <div id="container">
        
            <ul id="ul">
                    <li><a href="#">Pic 1</a></li>
                    <li><a href="#">Pic 2</a></li>
                    <li><a href="#">Pic 3</a></li>
                    <li><a href="#">Pic 4</a></li>
            </ul>

            <div class="bigImage">
          <img src="https://picsum.photos/id/1/300/300.jpg" class="show">
          <img src="https://picsum.photos/id/2/300/300.jpg">
          <img src="https://picsum.photos/id/3/300/300.jpg">
          <img src="https://picsum.photos/id/4/300/300.jpg">
          </div>
        </div>

const bigImage = document.querySelector("#container div.bigImage"); //获取bigImage元素 常量 img = bigImage.querySelector("img"); // 获取其中的 img 元素 const textdiv = bigImage.querySelector("div.text"); //获取包含文本的div

    const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
  
  // listen for mouseover event on the li elements
    for (var i=0; i<lis.length; i++) {
        lis[i].addEventListener('mouseover', function() {
    // on an event this will refer to the element that witnessed that event
      img.src = this.getAttribute("data-src");
      textdiv.innerHTML = this.getAttribute("data-text");
        }
    );
    }
  
  // initialise the bigImage with the image and text from the first list element  
  bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
  bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");

#container div.bigImage {
  display: inline-block;
}

#container ul {
  list-style: none;
  width: auto;
  float: left;
  margin: 2vw;
}

#container ul li {
  width: auto;
}

#container ul li a {  
  text-decoration: none;
}

<div id="container">
    
        <ul>
                <li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1"><a href="#">Pic 1</a></li>
                <li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2"><a href="#">Pic 2</a></li>
                <li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3"><a href="#">Pic 3</a></li>
                <li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4"><a href="#">Pic 4</a></li>
        </ul>

        <div class="bigImage">
      <img src="">
      <div class="text">
      </div>
    </div>