Question

我相信你们中的一些人看起来很容易，但这不是我之前遇到的事情。

我已经通过css / html制作了一个垂直菜单，该菜单最初显示正确，但当您将鼠标悬停在菜单上时，第二个项目显示为“删除”。它应该只是取代原始图片（见下文）

这里是应用的css：

.menu {
    margin: 10;
    padding: 0;
    width: 250px;
    list-style: none;
    background: #fff;
}
.menu li {
    padding: 0;
    margin: 0;
    height: 39px;
    list-style: none;
    background-repeat: no-repeat;
}
.menu li a, .assurance li a:visited {
    padding: 0;
    margin: 0;
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    height: 39px;
    background-repeat: no-repeat;
}
.about {background-image: url(/Pictures/web/c/o/a/About-Assurance.gif);}
.about a {background-image: url(/Pictures/web/m/x/c/About-Assurance-Hover.gif);}
.fraud {background-image: url(/Pictures/web/o/o/i/Counter-Fraud-Hover.gif);}
.fraud a {background-image: url(/Pictures/web/u/h/y/Counter-Fraud.gif);}
.health {background-image: url(/Pictures/web/s/m/t/Health-and-Safety-Hover.gif);}
.health a {background-image: url(/Pictures/web/e/m/y/Health-and-Safety.gif);}
.insurance {background-image: url(/Pictures/web/i/k/r/Insurance-Hover.gif);}
.insurance a {background-image: url(/Pictures/web/n/t/s/Insurance.gif);}
.internal {background-image: url(/Pictures/web/z/x/x/Internal-Audit-Hover.gif);}
.internal a {background-image: url(/Pictures/web/c/b/a/Internal-Audit.gif);}
.risk {background-image: url(/Pictures/web/s/j/v/Risk-Management-Hover.gif);}
.risk a {background-image: url(/Pictures/web/l/k/z/Risk-Management.gif);}
ul.menu li a:hover {background: none;}

Answer 1

我想你可能想要使用伪类：像这样悬停：

.about:hover {background-image: url(/Pictures/web/m/x/c/About-Assurance-Hover.gif);}

.fraud:hover {background-image: url(/Pictures/web/u/h/y/Counter-Fraud.gif);}

等

停止基于图像的css菜单丢弃

1 个答案: