相关疑难解决方法(0)

如何在此图像中创建非矩形边框？

当前代码:http://jsfiddle.net/bqjr5wep/

div {
    background:#1c1c1c;
    width:400px;
    height:200px;
    position:relative;
}

div:before, div:after {
    content:'';
    display:block;
    left:10px;
    right:10px;
    top:10px;
    bottom:10px;
    border:2px solid #FFF;
    position:absolute;
}

div:after {
    left:14px;
    top:14px;
    right:14px;
    bottom:14px;
}

这是关于如何处理重叠元素的不透明度并使用JS解决方案在悬停时使其保持一致的问答.

需求

要求是开发两个透明和重叠的元素,如下面的两个红色框.这些必须是透明的,以便可见背景内容.

现在,当悬停在任何这些元素上时,特定元素应该变为不透明,如下所示.