Question

我的投资组合部分存在两个问题，这个问题并不像我希望的那样顺利。他们在这里：

我希望我的项目能够改变背景颜色，并在将鼠标悬停在它们上方时显示一个小的加号。与此同时，我想添加一个“过渡：全部0.5s轻松进出”;但结果不是我的预期。它可能是因为我的“加号”应该位于另一个div中，但我不知道如何使其工作。相反，我把它放在这里：
```
.projectshot a .over:hover{
    position: absolute;
    background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
    border-radius: 8px;
    height: 150px;
    width: 200px;
    margin: 10px;
}
```
这是我想要实现的效果：http://bjorsberg.se/
困扰我的第二个问题是，如果你仔细看，当你用鼠标接近每个项目时，鼠标指针开始“跳舞”，它表现得很疯狂???我该如何解决???

这是我的JSFiddle：

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

我对网页设计很陌生（自从我开始学习以来已有4个月），我显然不善于将div放在另一个div中的div内...所以，如果你看到任何麻烦，请随时纠正我的小提琴我创建。谢谢！

Answer 1

如果我是你，我会简化html结构，因为没有必要。

例如：projectshot可能如下所示：

<div class="projectshot">
    <a href="http://www.yahoo.com" target="_blank">
        <img alt="Sushi" src="...">
    </a>
</div>

您可以将“封面”添加为:before伪元素。然后 - 在CSS中你需要做的就是将它添加到“cover”元素：

opacity: 0;
transition: opacity .2s;

和 - 在悬停时 - 将不透明度更改为1：

opacity: 1;

这是updated demo （我为了演示目的删除了很多你的html / css代码）

Answer 2

我刚做了一些小改动，包括：

将悬停移动到.projectshot框。
将background-position和background-repeat移至非悬停定义。
添加转场。

现在可以使用，但您仍然可以删除大量代码。即使是html也可以大大减少。我建议你也看一下（DEMO）。

.projectshot{
    position: relative;
    padding: 10px;
    height: 150px;
    margin-bottom: 30px;
    display: inline-block;
}

.projectshot img{
    height: 150px;
    width: 200px;
    border-radius: 8px;
    -webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    -moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    box-shadow: 0 9px 13px rgba(0,0,0,.14);
}

.projectshot:hover .over{
    background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
    background-color: rgba(51, 51, 51, 0.6);
    transition: all 0.5s ease-in-out;
}

.projectshot:hover {
    cursor: pointer;
}

.over{
    position: absolute;
    border-radius: 8px;
    height: 150px;
    width: 200px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.5s ease-in-out;
}

.inner{
    background: rgba(113,122,137,.85);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: none;
}

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

CSS Transition和另一个div里面的div表现得很疯狂

2 个答案: