Html 悬停时更改文本/图像

嗨！ 我和一些CSS一起工作，我很难在悬停状态下改变

.wclan{
    background: url(icon url here);
    width: 23%;
    height: 150px;
    position: absolute;
    top:0px;
    left: 25.5%;
    z-index: absolute;
    text-align: center;
    border-radius: 0px;
    font-size: 7px;
}

.wclan:hover{ 
    background: #d710ca;
    width: 100%;
    height: 150px;
    position: absolute;
    top:0px;
    left: 0%;
    z-index: 3000;
    text-align: center;
    border-radius: 0px;
    font-size: 7px;
}

我正在寻找悬停时要更改的图像。显示预览“图标”，如果您愿意，当您悬停时，它将更改为显示信息。问题是找到一个适用于所有大小的图像大小（因为我的代码使用的是百分比，所以每台计算机的图像大小可能不同）以及更改图像大小的时间有多及时。我想用背景URL来解决这个问题，但我觉得如果我在HTML中使用PNG会更容易。我只是不知道如何让PNG像其他代码一样在悬停时改变

---

希望这是有道理的。谢谢

一切看起来都很好。如果要更改悬停时的图像，只需在悬停时指定不同的背景图像路径。请看下面：

.wclan{ background-image: url(icon url 1); }

/*Change image url on hover*/

.wclan:hover{ background-image: url(icon url 2 ); }

---

我添加了一些保证金代码并删除了%参考。如果值为“0”，则不需要在其后面加后缀“px”或“%”。这可能适用于position:relative；，因为边距“自动”将其绑定到屏幕中心

 body, .wclan {background: url(icon url here); width: 23%; height: 150px; position: absolute; top:0; left: 0;margin:0 auto; z-index:-1; text-align: center; border-radius: 0px; font-size: 7px;
 }

.wclan:hover {background-color: #d710ca; width: 100%; height: 150px; position: absolute; top:0; left: 0; z-index: 3000; text-align: center; border-radius: 0px; font-size: 7px;
 }

---

我很困惑。您是否将初始状态设置为图像，然后悬停显示不同的图像？初始状态是图像，悬停时更改为背景色？或者你想要一幅图像和一种背景色，并在悬停状态下用它做些什么？

z-index:absolute无效，在悬停版本和非悬停版本之间存在大量不必要的重复值。。。问题，
.wclan
应用于什么类型的元素？也很困惑你的实际问题是什么haha@jlane09嘿很抱歉。是的，我想把原来的“图像”替换成另一个悬停图像。我忘了去掉颜色以使它更清晰！！问题是，由于代码是一个不确定的数字（因为它可以在任何计算机屏幕上以100%的速度变化），因此很难找到一个能够满足每个计算机屏幕的图像。有没有更简单的方法？（如果这没有任何意义的话，我很抱歉我说话不好）@abluegril对不起aa。如果有意义的话，wclan将被应用于一个HTML div元素！对不起，我是自学成才的，所以我可能没什么道理//mm\\>谢谢！！我明白了利润的含义：0自动；当您需要主页（而不是BG屏幕/正文）始终位于浏览器屏幕的中心时使用，无论您的主页有多宽。“0”表示没有顶部或底部边距（不适用于主div）。”“自动”左、右指示浏览器始终将主页保持在屏幕中央。通常所有其他div都在这个主div内，包括弹出消息等。所有这些对象都将同步垂直滚动。这不会影响附加到浏览器顶部或侧面的任何工具栏。边距只是页面/分区周围的间距。它可以由像素或百分比定义。