使用css更改悬停时的图像答案

【问题标题】：Changing image on hover with css使用css更改悬停时的图像
【发布时间】：2012-12-05 16:19:10
【问题描述】：

我对 css 了解不多，但我可以做些什么来更改子菜单上的项目符号图像？

#leftCntr .menuBox ul li a { padding: 0px 0px 0px 54px; color: #7d9696; text-decoration: none; background: url(../images/menuDisc.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

【问题讨论】：

请在 jsfiddle 中显示。你也应该显示 HTML...！
看这个帖子stackoverflow.com/questions/10202641/…
我不太了解您的 HTML，但您可以尝试将它们设置为不同的 URL。
如果您有网址...请提供...！

标签： html css

【解决方案1】：

将以下内容添加到您的 CSS 中。它将从另一个列表中的 li 中删除背景。

如果您想显示不同的图像，当然也可以设置不同的背景。

#leftCntr .menuBox ul li ul li a:active {
    background: none;
}

#leftCntr .menuBox ul li ul li a:hover {
    background: none;
}

（已编辑以匹配 A 元素。）

【讨论】：

【解决方案2】：

没有看到你的 HTML 代码很难说，但我猜应该这样做：

#leftCntr .menuBox ul li a {
    padding: 0px 0px 0px 54px;
    color: #7d9696;
    text-decoration: none;
    background: url(../images/menuDisc.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li a.active {
    color: #949494;
    background: url(../images/menuDiscHover.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li a:hover {
    color: #000000;
    background: url(../images/menuDiscHover.gif) 10px 4px no-repeat;
}

#leftCntr .menuBox ul li li a {
    background: url(../images/submenuDisc.gif) 10px 4px no-repeat; /* Set the image here */
}

【讨论】：

【解决方案3】：

把你的代码改成

#leftCntr .menuBox ul li a { padding: 0px 0px 0px 54px; color: #7d9696; text-decoration: none; background: url(../images/menuDisc.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
        #leftCntr .menuBox ul li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

/* New Added */

 #leftCntr .menuBox ul li li a.active { color: #949494; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }
            #leftCntr .menuBox ul li li a:hover { color: #000000; background: url(../images/menuDiscHover.gif) 10px 4px no-repeat; }

【讨论】：