通过内框计算外部元素的悬停状态

Question

当外部元素内部有边框和内部元素时，只有当光标位于边框内时，是否可以对外部元素的边框进行悬停效果？

例如，当我创建这样的标记时：

<div class="b mn">
    <p><a href="#"><img src=""></a></p>
</div>

/*...*/
div.b.mn p{
 margin: 4px 4px 5px 4px;
 border: 2px dashed #93F;
 background-clip: content-box;
}
div.b.mn p:hover, div.b.mn p:focus{
 border-color: #F93;
}

悬停效果（边框颜色变化）粘贴在外部元素上，因此即使光标正好在边框上，边框也会突出显示，但是只有当内部元素被光标悬停时我才需要以某种方式突出显示外边框。

- ＆GT;链接到完整的jsFiddle：demo markup

我知道如何通过jQuery或纯JavaScript来实现这样的效果，但我想知道是否有简单的html / css解决方案。对于相同的概念，它可能是一种不同的方法，我不介意它只要符合纯标记范式。

P.S。我将非常感谢任何其他建议或指出我在我的jsFiddlet中的html / css-code中的错误。因为我觉得我为了这么简单的布局而过于复杂化。

Answer 1

将hover提供给a而不是p并将其设为display:inline-block;以覆盖边框作为块级元素。

div.b.mn p{
 margin: 4px 4px 5px 4px; 
}
div.b.mn p a{
 border: 2px dashed #93F;
 background-clip: content-box;
 display:inline-block;
 border-radius: 5px;
}
div.b.mn p a:hover, div.b.mn p a:focus{
 border-color: #F93;
}

<强> fiddle demo