html - 修改列表 CSS 代码

Question

我正在使用 CSS 代码:http://jsfiddle.net/HequH/3/

HTML:

<div id="vertmenu">
    <ul>
        <li><a href="#">List Item 1</a></li>
        <li><a href="#">List Item 2</a></li>
        <li><a href="#">List Item 3</a></li>
    </ul>
</div>

CSS:

#vertmenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
#vertmenu ul {
    list-style-image: url('http://s9.postimg.org/5pcchngqz/triangle.png');
    margin: 0 0 0 30px;
    padding: 0px;
    border: none;
}
#vertmenu ul li {
    margin: 0px;
    padding: 0px;
}
#vertmenu ul li.hover {
    list-style-image: url('https://s22.postimg.org/jx9f9v5a5/square.png');
}

#vertmenu ul li:first-child a {
    border-top: 0px;
}
#vertmenu ul li a {
    font-size: 13px;
    display: block;
    border-top: 2px dashed #000000;
    padding: 0;
    background-color:#ffffff;
    width:100%;
    line-height:46px;
    height:46px;
    vertical-align:middle;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus {
    background-color: #cccccc;
}

我希望元素符号区域与每个列表项的区域匹配。 (换句话说，我想在元素符号下方添加虚线边框，并使元素符号后面的背景区域在鼠标悬停时变为灰色，以便与文本保持一致。)

是否也可以在鼠标悬停时将元素符号更改为下图？

Answer 1

您的代码有点错误。您使用的是 .hover 而不是 :hover。

此属性:list-style-position:inside; 将解决 bg 颜色问题。

JSFiddle updated

CSS

#vertmenu ul li {
list-style-image: url('http://s9.postimg.org/5pcchngqz/triangle.png');
list-style-position:inside;
margin: 0 0 0 30px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}

#vertmenu ul li:hover {
list-style-image: url('http://s22.postimg.org/jx9f9v5a5/square.png');
}