使用css在悬停时更改图像

Question

我不太了解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; }       

Answer 1

很难说没有看到你的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 */
}

Answer 2

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

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

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

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

（编辑以匹配A元素。）

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