Question

我是一名遇到手动编码网站问题的新手。

我打算将div改为箭头，当div作为锚链接时。它似乎很简单，但在我的构建中的某个地方，只有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>&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

我发现在悬停时进行图像交换的最简单方法是通过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/

您网站中的“跳跃”可能来自不同尺寸的图片，也可能来自删除“网络应用”字样。另外，我注意到你有一个js错误。 TypeError：无法设置null http://www.tarynblake.com/js/myScripts.js:17

的属性'innerHTML'

Answer 2

如果你只想在悬停时换掉图像，那么你可能已经过度编码了你的解决方案。

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

纯CSS：悬停显示：

2 个答案: