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

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;
}

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

-> 完整 jsFiddle 链接:demo markup

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

附言我将不胜感激任何其他建议或指出我在我的 jsFiddlet 中的 html/css 代码中的错误。因为我觉得我为这样一个简单的布局把事情复杂化了。

Answer 1

将 hover 给 a 而不是 p 并使其 display:inline-block; 覆盖边框作为 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