Question

我正在尝试将“加号”（它的.png文件）添加到我的投资组合部分。我的目标是只有当客户用鼠标指针悬停在我的项目上时才能看到这个“加号”，但同时我想保留我已设置的背景颜色属性。

然而，我的加号没有出现！？我怎么能这样做？

在此网站上，您可以看到类似的效果：http://bjorsberg.se/

这是我的CSS（来自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;
}

以下是我要添加的加号示例：http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png

Answer 1

这种风格显然必须在悬停上应用。

只需将background-color中的.projectshot a .over:hover{替换为相应的background即可。您根本不需要div.plus，也不需要div.inner（您可以从HTML中删除这些内容！）：

.projectshot a .over:hover{ position: absolute; background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6); border-radius: 8px; height: 150px; width: 200px; margin: 10px; }

这是更新的小提琴：http://jsfiddle.net/L8HX7/8/

Answer 2

这是一个非常细分的例子。

http://jsfiddle.net/sheriffderek/UVvWm/

CSS

.block {
    position: relative; /* so the .plus knows what to be relative to */
    display: block;
    width: 10em;
    height: 10em;
    background-color: red;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}


.block:hover .overlay {
    background-color: rgba(0,0,0,.5);
}

.block .plus {
    display: none;
}

.block:hover .plus {
    display: block;
}



/* to position the .plus */
.plus {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

HTML

<a href="#"class="block">

    <div class="overlay"></div>

    <img class="plus" src="http://placehold.it/100x100" />

</a>

你可以使用一个：在psuedo元素之后叠加 - 但我想保持简单。请记住，CSS声明从右到左阅读....“任何.plus - 执行此操作，当.block：悬停”等等----

如何在我的投资组合中添加“加号/图标”？

2 个答案: