使用CSS更改悬停图像

我似乎无法理解这一点。 我想有一个系统，使一个图像将改变为另一个图像时，悬停在

在我的html中，我有：

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

但我似乎什么也没发生。我哪里做错了

编辑：

似乎还是没什么效果

.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>

您没有在此行中关闭
p
：

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

将其更改为：

width: 250px;


您没有在此行中关闭
p
：

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

将其更改为：

width: 250px;

您的
p
元素未关闭。语法错误现已修复。仍然不起作用，hmmYour
p
元素没有关闭。语法错误现已修复。看来还是不行，嗯。助教。已修复，但问题仍然存在。小提琴在那里工作（尽管做了一些与我的意图不同的事情），但在我的网站上什么也没有发生。嗯……您的CSS在
宽度：250px:
中有无效语法。我在我的答案中添加了信息。我需要眼镜，看起来：（哦，好吧。似乎仍然对我没有任何帮助。不确定我会错在哪里。基于你的CSS和HTML，它可以工作（如JSFIDLE演示）.但是如果它不适合你，也许你需要在这里添加完整的代码来调试…我可以让它像fiddle演示一样工作，使另一个图像出现在第一个图像旁边。似乎无法让它在图像更改为另一个图像时工作。woops.Ta.修复了这个问题，但问题仍然存在。fiddle在那里工作（虽然做了一些与我的意图不同的事情）但我的网站上没有发生任何事情。嗯……你的CSS在
宽度：250px:
中有无效的语法。我在我的答案中添加了信息。我需要眼镜看起来：（哦，好吧。似乎对我没有任何帮助。不确定我哪里出错了。基于你的CSS和HTML，它可以工作（就像在JSFIDLE演示中一样）。但是如果它对您不起作用，可能您需要在这里添加完整的代码来调试…我可以让它像FIDLE演示一样工作，使另一个图像出现在第一个图像旁边。似乎无法使它在图像更改为另一个图像时工作。
width: 250px;