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;

使用CSS在悬停时更改图像

1 个答案: