html - 如何使元素不悬停在边框/轮廓上？

Question

我有一系列彼此相邻的 50% 宽度元素，我想给每个元素一个 20px 的白色边框来分隔它们，原因是我有一个响应式布局，我总是想要元素之间有 40px 的空白。

我在它们上面也有悬停效果，但是当你在主要元素上使用边框时，当你将鼠标悬停在边框或轮廓上时，你会触发悬停效果，这是我不想要的。

http://jsfiddle.net/keleturner/6PqJt/尝试将鼠标悬停在红色边框和轮廓上(轮廓需要悬停在两个 block 之间才能触发悬停)。

我找到的唯一解决方案是添加一个新元素将所有内容包装在 .main 中并在那里给它一个边框，但这是非常不符合语义的并且必须为类似的东西添加额外的标记这似乎不对。

Answer 1

线

.main:hover .inside { background: blue; }

错了，应该是

.main .inside:hover { background: blue; }

http://jsfiddle.net/6PqJt/5/编辑 - 更新 fiddle 以修复底部 .main - 还添加了一些 css 来修复第二个的悬停