纯 CSS ：悬停显示：

Question

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

我打算让 div 在悬停时变成箭头，div 是锚点 link。这看起来很简单，但在我构建的某个地方只有 div 的段落开始对鼠标悬停做出反应。图像不会对我想要的悬停做出反应。我不知道是什么原因造成的。（或者当较大的图像悬停在上面时发生的跳动。）

页面在这里：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> </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

我发现在悬停时进行图像交换的最简单方法是通过 CSS。

<div class="image-swap"></div>

.image-swap {
width: 200px;
height: 200px;
background-image: url(images/stradegy-image-hover.jpg);
background-position: 0 0;
}

.image-swap:hover {
background-position: 0 100%;
}

这是一种处理 CSS3 的方法，但请记住，IE 不能很好地与 CSS3 兼容。 http://jsfiddle.net/gd8ba/

您网站中的 "jumping" 可能来自不同大小的图像和/或来自删除单词 "web apps"。另外，我注意到你有一个 js 错误。类型错误：无法设置属性 'innerHTML' 为 null http://www.tarynblake.com/js/myScripts.js:17

Answer 2

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

你想要做的是获取你的 .top class 并使用 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 动画过渡或其他效果来换出图像，但这是一个非常基本的概述。希望这对您有所帮助。

纯 CSS ：悬停显示：

Pure CSS :hover display:

html

css

hover