Question

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

Answer 2

你的问题很简单，你有一个错字。

此：

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

应该是：

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

DEMO

在所有现实中，你可以通过纯css而不是图像实现这一目标。

对于问题的第一部分，

我在li上使用了一个伪元素来达到预期的效果。

新的css：

#vertmenu ul li:before {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    width: 30px;
    border-top: 2px dashed #000000;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#vertmenu ul li:hover:before {
    z-index: -1;
    background: #cccccc;
}

#vertmenu ul li:first-child:before {
    border-top: 0;
}

Demo

Answer 3

通用伪元素解决方案。

Codepen Demo

<强> CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#vertmenu {
  margin: 25px;
  padding: 0;
}

li {
  padding: 0;
  list-style:none;
  padding-left:5px;
  vertical-align: middle;
  height:40px;
  margin-bottom:5px;
  border-bottom: 1px dashed black;
}

li:before {
  content:" ";
  width:25px;
  height:32px;
  margin-top:4px;
  background-image: url('http://s9.postimg.org/5pcchngqz/triangle.png');
  background-repeat:no-repeat;
  background-position: center;
  display:inline-block;
  vertical-align: middle;

}
li:hover {
  background:lightgrey;
}


li:hover:before {
    background-image: url('http://s22.postimg.org/jx9f9v5a5/square.png');
}


a {
  line-height:32px;
  height:32px;
  text-decoration:none;
  vertical-align: middle;
  margin-lefT:10px;
}

修改列表CSS代码

3 个答案: