如何获得：悬停效果扩展到边缘？

Question

我在列表中有一些文本链接，然后在两个div中。我希望悬停效果从列表扩展到外部div的外部。有没有办法用负填充做到这一点？其他方式？可能吗？

视觉效果会更容易

现在如何 -

突出显示周围div-

中的填充

我希望a：hover效果看起来像

基本上代码看起来像这样 -

.1 { padding: 10px;}
.2 { padding: 5px;}

<div class="1">
  <div class="2">
    <ul>
      <li>
        <a>abcde</a>
      </li>
      <li>
        <a>fghij</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

负边距/填充无效且无法按预期工作， 但是有可能，你必须拿出他所有的 父母边距并添加填充到链接 同样的效果，但所有广泛的锚：

/* CSS CODE */ 
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }

您可以在http://jsfiddle.net/3zANs/

中看到一个示例

Answer 2

负填充无效（并且根本不起作用），另一方面负边距有效，在您的情况下可能有用。

我相信，同样无效的是带数字的星级。