2

我的投资组合部分有两个问题，它不像我想要的那样顺利。他们来了：

  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 中的 div 内......所以，如果你看到我创建的任何问题，请随时纠正我的小提琴。谢谢！

4

2 回答 2

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;

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

于 2013-07-24T11:23:32.883 回答
1

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

  • 将悬停移动到.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;
}
于 2013-07-24T11:26:15.567 回答