html - 在列表项之间使用悬停和间距堆叠背景颜色

Question

我想要一个背景有点透明的列表，以及一个包含具有自己背景颜色的跨度的列表项。我想要 li 之间的间距，但要保留的颜色和悬停只取 span 容器的高度（不是完整的 li）标记是这样的：

<div>
  <ul>
    <li><span>hello</span></li>
    <li><span>world</span></li>
  </ul>
</div>

这是CSS：

ul {
  list-style:none;
  background: rgba(255, 0, 0, .5);
}
li {
  margin-left: 20px;
}

li:hover {
  background: gray;
}

span {
  border-top: solid rgba(0,255,0,1) 5px;
  display: inline-block;
  width: 80%;
  height: inherit;
  background: rgba(0,255,0,1);
}

span:hover {
  background: gray;   
}

只有当您尝试将鼠标悬停在元素上时才会出现问题，li 的高度大于 span 的高度。另一个限制是 ul-li 标记是一成不变的。但是，我可以更改 li 内的任何内容（因此不需要跨度）。

jsFiddle：

http://jsfiddle.net/zGzgh/2/

当前状态（悬停在 hello 列表项上）：

仍然不可接受的状态（在 hello 列表项悬停时）

所需状态（悬停在 hello 列表项上）：

如果您需要更多信息，请告诉我。

Answer 1

我想我已经弄清楚了。伪元素来拯救...

JSFiddle 演示

HTML

<div>
    <ul>
        <li>
            <span>
                hello
            </span>
        </li>
        <li>
            <span>
                world
            </span>
        </li>
    </ul>
</div>

CSS

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

uli, li {
    margin: 0;
    padding: 0;
}

ul {
    list-style:none;
    background: rgba(255, 0, 0, .5);
    overflow:hidden; 
}
li {
    margin:0 auto;
    background: rgba(0,255,0,1);
    width: 80%;
    height:50px;
    padding-top:10px;
}

span {
    display:block;
    line-height:30px;
    height:30px;
    position:relative;
    cursor:pointer;
}

span:hover,
span:hover:after {
    background:grey;
}

span:after {
    position:absolute;
    content:"";
    top:0;
    left:100%;
    width:100%;
    height:100%;  
}

Answer 2

问题来自跨度规则

消除：

border-top: solid rgba(0,255,0,1) 5px;

从跨度元素规则，然后我添加

height:30px; 

到里元素法则

jsFiddle