0

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

但是，我的加号没有出现！？我怎样才能做到这一点？？？

在这个网站上你可以看到类似的效果：http ://bjorsberg.se/

这是我的 JSFiddle：http: //jsfiddle.net/L8HX7/

这是我的 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

4

2 回答 2

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>

您可以使用 :after 伪元素作为叠加层 - 但我想保持简单。请记住，CSS 声明是从右到左读取的......“任何 .plus - 执行此操作，当 .block:hover”等 ----

于 2013-07-23T19:36:42.967 回答
1

该样式显然必须应用于hover。

只需将background-colorin替换.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/

于 2013-07-23T19:26:01.203 回答