添加半边框以悬停图片

时间:2015-05-26 14:24:59

标签: html css border

我目前有一个悬停图片,我希望添加一个右边框#000,它只占图像全长的80%。我一直试图修改其他“半边界”代码,以便为正确的边界工作无济于事。

任何人都知道怎么做?

2 个答案:

答案 0 :(得分:1)

披露:从here复制,但有一些更改。

这会有效吗?



#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top: -1px;
        left: -1px;
        height: 80%;
        width: 1px;
        background-color: #fff;
}

<div id="holder">
        <div id="mask"></div>
</div>

    
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我的建议是为您的图片创建80%高度的叠加层。

pnl

以下是一个有效的例子:http://jsfiddle.net/dLk6xrvr/