html - 纯 CSS :hover display:

Question

我是一个普通的新手，在我的手工编码网站上遇到了问题。

我打算让一个 div 在悬停时变成一个箭头，而 div 是一个 anchor 链接。这看起来很简单，但在我构建的某个地方，只有 div 的段落开始对鼠标悬停使用react。图像不会对我想要的悬停使用react。我不知道是什么原因造成的。 (或者当较大的图像悬停时发生的跳动。)

页面在这里:http://www.tarynblake.com/projects/webapps.html

这是相关的 HTML:

<a href='/projects.html'>
  <div class="two-sides">
    <img id="coding" class="top" src="/img/projects/code-blue-gray.png">
    <img class="bottom arrow" src="/img/projects/arrow-red.png">
    <p class="title">Web Apps<br>&ensp;</p>
  </div>
</a>

这是 CSS:

.top {
    max-height: 300px;
    max-width: 90vw;
    opacity: .65;
    filter: alpha(opacity=30);
    box-shadow: 10px 10px 10px 0 #3f3f3f;
}
.two-sides:hover .bottom {
    display: block;
}
.two-sides:hover .top {
    display: none;
}
.two-sides:hover img[src*="arrow"] + .title {
    visibility: hidden;
}
.bottom {
    display: none;
    max-height: 300px;
    max-width: 90vw;
    margin: 0;
    padding: 0;
    opacity: .65;
}
.arrow {
    height: 40px;
    max-width: 100px;
    margin: 2.5vh 0 2.6vh 1vw;;
    padding: 10px 13px; 
    border: 3px hidden #973c13; 
    opacity: .8;
}

Answer 1

如果您只是想换掉鼠标悬停时的图像，那么您可能对解决方案进行了过度编码。

你想要做的是使用你的 .top 类并使用 CSS 添加图像，如下所示:

.top {
background-image: url ('/img/projects/code-blue-gray.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}

然后对于悬停状态，添加序列中的下一张图像。

.top:hover {
background-image: url ('/img/projects/arrow-red.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}

您可以添加 CSS 动画过渡或其他效果来替换图像，但这是一个非常基本的概述。希望这会有所帮助。