javascript - 将鼠标悬停在一列中的图像上以使文本显示在不同的列中

Question

很抱歉，我知道这个问题已经以各种不同的形式提出，但我找不到我的确切问题的答案 - 至少不是我理解的答案!

我是编程新手，目前正在为我的婚礼蛋糕业务构建一个网页，以尝试熟悉 HTML、CSS 以及一些 JavaScript 和 JQuery。我在一列中有一个缩略图列表，我在其中添加了“onmouseover”，以便在悬停时(除了 css 过渡)它们会在中央列中显示自己的大版本。我还想在主图像右侧的第三列中显示有关每个蛋糕的信息，但我不知道该怎么做!

<div class="col-md-3">
<ul class="cake-thumbs">
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img10" src="Resources/img/10.jpg" alt="Pastel Pink Placard and Pearls">
        </figure>
    </li>
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img11" src="Resources/img/11.jpg" alt="Naked Wedding Cake with fresh fruit">
        </figure>
    </li>
    <li>
        <figure class="cake-img">
            <img onmouseover="getElementById('preview').src=this.src" id="img12" src="Resources/img/12.jpg" alt="Gold Damask and Pearls">
        </figure>
    </li>
</ul>
</div>
<div class="col-md-6">
        <img id="preview" src="Resources/img/1.jpg" alt="">
</div>
<div class="col-md-3">
    <p id="info">Price and servings here</p>
</div>

Answer 1

jQuery 将使这(等等……)小菜一碟；)

$('.cake-img img').mouseover(function(){
    $('#preview').attr('src', this.src)
})

您可以将其放在页面末尾或头部，包裹在 document.ready call 中, 删除您拥有的内联 JavaScript。