css - 如何获得 :hover effects expand past margins?

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

负 margin/padding 是无效的，不会像预期的那样工作，但有可能，你必须拿出他所有的 parent 边距并向链接添加填充以获取同样的效果，但所有的 anchor 都是宽的:

/* 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/