Question

当我将鼠标悬停在链接中时，我试图显示一个隐藏的部分，但我做不到。

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="">Wasted Time</a></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a></p>
    </section>
</section>
<section class="preview">
    <section id="preview-01"><img src="img/preview-project-01.jpg"/></section>
</section>

我想在#fromdesigner悬停并复制到其他链接和图像时显示＃preview-01。

This is how website looks without hover

And this is what I'm trying to make

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>

Answer 2

实际上，在css中，除非您将目标定位为孩子或兄弟姐妹，否则您无法进行悬停效果，我已将您的html编辑为类似于下一个代码段，这不是最好的解决方案，并且没有响应能力，但至少没有javascript

#projects{
  position: relative;
}

p{
  width: 50%;
}
.preview{
  display: none;
}
img{
  width: 50%;
  right: 0;
  position: absolute;
  top: 15px
}
#america-regular-list1:hover ~ .preview{
  display: block;
}

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list1"><a id="fromdesigner" href="">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="">Wasted Time</a></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a></p>
      
      <div class="preview"><img src="https://www.jamierubin.net/wp/wp-content/uploads/2015/12/Blog-Header-Burke.jpg"/></div>
    </section>
</section>

您可以在jQuery或vanila JS中轻松实现您想要的功能。

我的笔记：不要在HTML中重复ID，这不是一个好习惯。

Answer 3

我在这里不太了解您的问题。但是您可以将每个图像嵌入每个链接下。

    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="">From Designer to Designer</a><img src="img/preview-project-01.jpg" id="hello"/></p>
        <p id="america-regular-list"><a href="">Wasted Time</a><img src="img/preview-project-01.jpg" /></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a><img src="img/preview-project-01.jpg"/></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a><img src="img/preview-project-01.jpg"/></p>
    </section>
</section>

在CSS中：

img{
display: none;
}
a#fromdesigner:hover #hello{
display: inline-block;
}

希望有帮助！

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

3 个答案: