如何制作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我以前试过这样做，但我需要它处理图片，而不是鼠标上方悬停的单词.能不能修改一下脚本，让我在onmouseover中放个图像？我已经尝试过多种方法了。任何帮助都是非常感谢的！谢谢，伙计们！

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

示例：小提琴

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;
  }
});