Question

Heyo！我正在使用一些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在悬停时改变其余的代码。

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

Answer 1

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

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

/*Change image url on hover*/

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

Answer 2

我添加了一些保证金代码并删除了％引用。如果某个值为＆＃39; 0＆＃39;，则无需使用后缀，例如＆＃39; px＆＃39;或＆＃39;％＆＃39 ;.这可能适用于position：relative;，因为margin＆＃39; auto＆＃39;保持它绑定到屏幕的中心。

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

在悬停时更改文本/图像

2 个答案: