停止基於圖像的css菜單丟失

我相信對你們中的一些人來說，這看起來很簡單，但這不是我以前遇到過的。停止基於圖像的css菜單丟失

我通過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;}

來源

2016-03-15 Russell Moore

：懸停這樣的：

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

等

來源

2016-03-15 14:19:19 Fhtagn

Thanks Fhtagn！這好多了。 –

你敢打賭，樂意幫忙！ – Fhtagn

停止基於圖像的css菜單丟失

回答

相關問題