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

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：

演示

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;
}