Question

我正在尝试创建更改图像功能，就像我们可以在GMail帐户中更改图像一样。

在mousehover事件中，它会显示change image选项。

也许这是我不知道的某种新概念。我在CSS和JavaScript方面不是很好，但我想这是一个div，z-index更改了显示change image选项。你能解释一下如何实现这种效果吗？

Answer 1

如果你想要一个纯粹的CSS解决方案，你可以像这样尝试

div.wrap {
    position: relative;
    display: inline-block;
}

div.wrap img {
    position: absolute;
}

div.wrap img:nth-of-type(1) {
    opacity: 0;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(1) {
    z-index: 2;
    opacity: 1;
}

div.wrap img:nth-of-type(2) {
    opacity: 1;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(2) {
    opacity: 0;
}

Answer 2

这是使用css伪元素:after：

的版本

demo

HTML：

<a href="#" class="image">
    <img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>

CSS：

.image img{
    width: 100px;
    text-decoration: none;
}

.image:after{
    content: "Change Image";
    display: block;
    position: relative;
    top: -25px;
    width: 100px;
    background-color: rgba(77, 144, 254, 0.7);
    color: white;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    transition: opacity 300ms;
}
.image:hover:after{
    opacity: 1;
}

Answer 3

这是你的意思吗？

CSS

.image {
    width: 100px;
    height: auto;
}
.popup {
    top: -25px;
    left: 25px;
    width: 150px;
    height: 75px;
    position: relative;
    display: none;
    background-color: grey;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
}
.image:hover + .popup {
    display: block;
}
.popup:hover {
    display: block;
}

HTML

<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup"><a href="#">Change Image</a></div>

在jsfiddle

上

Answer 4

我不确定我明白你想要什么，但我会说那样的话：

HTML：

<img src="yourimage" />
<a href="changeYourImage" class="appearOnHover">change</a>

CSS：

a.appearOnHover {
    display: none;
}

a.appearOnHover {
    display: block;
    background-color: #777777;
}

如何在gmail帐户中像鼠标悬停一样创建更改图像选项？

4 个答案:

demo