html - 将鼠标悬停在链接中时如何显示图像？

Question

<分区>

Answer 1

我有一个解决方案给你。我已经把它贴在这里了。希望对您有所帮助。

function imgShow1() {
  document.getElementById('preview-01-img').style.opacity = 1;
}

function imgHide1() {
  document.getElementById('preview-01-img').style.opacity = 0;
}

function imgShow2() {
  document.getElementById('preview-02-img').style.opacity = 1;
}

function imgHide2() {
  document.getElementById('preview-02-img').style.opacity = 0;
}

function imgShow3() {
  document.getElementById('preview-03-img').style.opacity = 1;
}

function imgHide3() {
  document.getElementById('preview-03-img').style.opacity = 0;
}

function imgShow4() {
  document.getElementById('preview-04-img').style.opacity = 1;
}

function imgHide4() {
  document.getElementById('preview-04-img').style.opacity = 0;
}

.preview img {
  height: 10vw;
  width: 20vw;
  object-fit: cover;
  opacity: 0;
  transition: all .33s ease-in-out;
}

.preview section {
  display: inline-block;
}

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="" onmouseover="imgShow1()" onmouseleave="imgHide1()">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow2()" onmouseleave="imgHide2()">Wasted Time</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow3()" onmouseleave="imgHide3()">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow4()" onmouseleave="imgHide4()">Aesthetic Posters</a></p>
    </section>
</section>
<section class="preview">
    <section id="preview-01"><img id="preview-01-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-02"><img id="preview-02-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-03"><img id="preview-03-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-04"><img id="preview-04-img" src="https://i.imgur.com/J67Ukc8.jpg"/></section>
</section>