html - CSS Transition 和另一个 div 中的 div 表现疯狂

Question

我的投资组合部分有两个问题，它不像我希望的那样流畅。他们在这里:

1. 我希望我的元素更改背景颜色并在将鼠标悬停在元素上时显示一个小加号。同时我想添加一个“过渡:所有 0.5 秒的缓入缓出；”但结果不是我所期望的。这可能是因为我的“加号”应该位于另一个 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/

2. 第二个困扰我的问题是，如果你仔细观察，当你用鼠标接近每个元素时，鼠标指针开始“跳舞”并且表现得很疯狂？？？我该如何解决？？？

这是我的 JSFiddle:

http://jsfiddle.net/8fCMA/2/

.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 中...所以，如果您发现任何问题，请随时纠正我的 fiddle 创建。谢谢!

Answer 1

如果我是你，我会简化 html 结构，因为这不是必需的。

例如:projectshot 可以如下所示:

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

并且您可以将“cover”添加为:before 伪元素。然后 - 在 css 中，您需要做的就是将其添加到“cover”元素中:

opacity: 0;
transition: opacity .2s;

并且 - 在悬停时 - 将不透明度更改为 1:

opacity: 1;

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