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

Question

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

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

http://jsfiddle.net/keleturner/6PqJt/ 尝试悬停在红色边框和轮廓上（勾勒出你需要悬停在两个块之间以触发悬停）。

我找到的唯一解决方案是添加一个新元素来包装.main内的所有内容并在那里给它一个边框，但这是非语义的，并且不得不为这样的事情做额外的标记＆＃39 ;似乎没错。

Answer 1

行

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

错了，应该是

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

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