悬停时更改文本/图像

Question

嘿嘿！我正在与一些 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;
}

我正在寻找悬停时要更改的图像。显示预览 'icon' 如果您愿意，当您将鼠标悬停时它会更改以显示信息。问题是找到适用于所有尺寸的图像尺寸（因为我的代码使用百分比，每台计算机可能不同）以及更改它是多么及时。我正在考虑用背景 URL 解决这个问题，但我觉得如果我在 HTML 中使用 PNG 会更容易。我只是不知道该怎么做让 PNG 像其余代码一样在悬停时发生变化。

希望这是有道理的。谢谢！

Answer 1

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

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

/*Change image url on hover*/

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

Answer 2

我添加了一些保证金代码并删除了 % 参考。如果值为“0”，则无需在其后添加 'px' 或“%”等后缀。这可能与 position:relative; 一起工作得很好，因为边距 'auto' 使其绑定到屏幕的中心。

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

悬停时更改文本/图像

Changing text / image on hover

html

css

image

hover