css - 使用 CSS 更改悬停时的图像

Question

我似乎无法弄清楚这一点。我想有一个系统，一个图像将在悬停时变为另一个图像。

在我的 html 中，我有：

<div class="linkyimage">
<img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png"></p>
</div>

然后在我的CSS中：

.linkyimage{
    position: relative;
    height: 250px;
    width:250px:    
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px:
    visibility: hidden;
    opacity: 0;
}

.linkyimage:hover .hovvery {
    visibility: visible;
    opacity:1;
}

然而对我来说似乎什么都没有发生。我哪里错了？

编辑：

好像还是没有效果。。。。。。

.linkyimage{
    position: relative;
    height: 250px;
    width:250px; 
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px;
  visibility: hidden;
  opacity: 0;
    }

.linkyimage:hover .hovvery{
    visibility: visible;
    opacity:1;
    }

和html：

<div id="content">

    <div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>

    <img src="image/yellow.png">
    <img src="image/lblue.png">
    <img src="image/green.png">
    <img src="image/brown.png">

    <div class"linkyimage">
    <img src="image/dblue.png" alt"blue" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>
</div>

我要找一个图像库，鼠标悬停时会变成黑色图像 - 将来我会制作它，这样图像的描述就会出现在它上面，但现在试图让基础知识继续下去！

Answer 1

Working FIDDLE Demo

你没有关闭p这一行：

<p class="hovvery"<img src="image/black.png"></p>

正确代码：

<div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"><img src="image/black.png" /></p>
</div>

您的 CSS 中也有语法错误：

width:250px: /* it must be semicolon ; at the end */

将其更改为：

width: 250px;