javascript - 如何制作 2 列投资组合页面，左边是导航，右边是当图像悬停在左侧导航词上时显示的图像

Question

我正在制作一个投资组合网站，我正在尝试模仿这种效果 http://xavierbourdil.com/我可以用右侧出现的文字创建悬停效果，但如果我尝试使用图像进行此操作，它不会让我将其放在右侧 div 中。谁能帮我一个简单的 html/css 解决方案？

html

<nav>
  <ul>
    <li><a class="galleryhover" href="#menu1">SOLAR</a><img class="right" src="img/green.jpg" alt=""></li>
    <li><a class="galleryhover" href="#menu2">INK CHEF</a><img src="img/gray.jpg" alt=""></li>
    <li><a class="galleryhover" href="#menu3">BRANDING</a><img src="img/yellow.jpg" alt=""></li>
    <li><a class="galleryhover" href="#menu4">POSTERS</a></li>
    <li><a class="galleryhover" href="#menu5">LAYOUT</a></li>
  </ul>
</nav>

CSS

container {
    overflow: hidden;
    margin: 100px auto;
    width: 800px;
    height: 500px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -60;
}

.container li img {
    position: absolute;
    top: 0;
    left: 800px;
    z-index: -50;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

li a:hover {
    background: #eee;
}

li a:hover + img {
    left: 0px;
}

.galleryright {
    right: -700px;
}

可能性#2: html 我以前试过这个，但我需要它来处理图像，而不是鼠标悬停时悬停旁边的 ('') 字词......可以更改脚本以将图像放在鼠标悬停上吗？我已经尝试了很多东西。任何帮助表示赞赏!提前谢谢大家!

<div id="content">
    Stuff should be placed here.
</div>

<br/>
<br/>
<br/>
<ul>
    <li onmouseover="hover('Apples are delicious')">Apple</li>
    <li onmouseover="hover('oranges are healthy')">Orange</li>
    <li onmouseover="hover('Candy is the best')">Candy</li>
</ul>

<script>
    function hover(description) {
        console.log(description);
        document.getElementById('content').innerHTML = description;
    }
</script>

Answer 1

使用 JavaScript 执行此操作的一种方法是在导航上附加一个监听器，选择悬停的那个，选择 src 值并更改右侧图像的 src

示例:Fiddle

html

<article>
  <section>
    <ul class="portfolio-nav" id="js-portfolio-links">
      <li><a data-img-src="http://placehold.it/400x150" href="">First Image</a></li>
      <li><a data-img-src="http://placehold.it/350x150" href="">Second Image</a></li>
    </ul>
  </section>
  <section class="portfolio-img">
    <div class="img-placeholder">
      <img src="http://placehold.it/400x150" id="js-img-placeholder">
    </div>
  </section>
</article>

js

var links = document.getElementById('js-portfolio-links');
var placeholder = document.getElementById('js-img-placeholder');
links.addEventListener('mouseover', function(e) {

  if (e.target && e.target.nodeName === 'A') {
    var srcPath = e.target.getAttribute('data-img-src');
    placeholder.src = srcPath;
  }
});