Question

DIV+CSS代码实现这个链接效果

请教一下大家，我想把链接做成这个效果，然后鼠标放上去的时候链接会变红，这怎么实现啊？纯DIV+CSS实现，谢谢了。

Answer 1

其实用border还是可以到达这个效果的，但是这样做会有缺点，就是会出现缝隙，因为你border就算1cm也是看的出来的，楼上说的都不错，所以他们的方法我就不介绍了，但是哥们我推荐你用图片替换的方式来做那样效果会更好，首先那个框用PS裁切了，然后戴红色框的也用PS裁切了，通过图片的替换当光标移动上去的时候完成替换，这样的效果是最好的，希望能够帮到你！一般公司里面做页面，做控件的效果，都是通过那样来做，因为比较精确！希望我的回答能够帮到你！

Answer 2

<style type="text/css">
*{margin:0;padding:0;border:0;}
.test{list-style:none;width:500px;margin:70px;}
.test li{float:left;}
.test li a{display:block;height:30px;padding:0 10px;margin:0 -1px -1px 0;border:1px solid #666;text-decoration:none;font:13px/30px "宋体";}
.test li a:hover{position:relative;z-index:7px;border:1px solid red;}
</style>
<ul class="test">
<li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li>
<li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li>
<li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li><li><a href="#">测试内容文本</a></li>
</ul>
应该就是这样你试试

Answer 3

我已经帮你写了一个了，你把代码复制过去就可以看到效果了。
<div class="linkred">
　　<a href=''>百度</a>
　　<a href=''>百度知道</a>
</div>

<style>
.linkred a{
　　display:block;
　　float:left;
　　padding:8px 10px;
　　border:1px solid #f0f0f0;
　　color:blue;
　　text-decoration:none;
}
.linkred a:hover{
　　border:1px solid #f00;
　　color:#f00;/*如果不想字变红把这行删除就可以了*/
}
</style>

追问

你这个代码没解决两个链接接缝处两个边框的问题。这个问题的关键在于，链接与链接之间只有一个边框。

追答

呵呵，稍微修改一下就可以的，原来没有看清楚图。

样式做如下调整：

.linkred a{

     display:block;

     float:left;

     padding:8px 10px;

     border:1px solid #000;

     color:blue;

     text-decoration:none;

     margin-left:-1px;

     position:relative;

     z-index:1;

}

.linkred a:hover{

     border:1px solid #f00;

     color:#f00;

     z-index:2;

}

<div class="linkred">

    <a href=''>百度</a>

    <a href=''>百度知道</a>

    <a href=''>百度经验</a>

</div>

效果图如下：

Answer 4

您好，
你用伪类加border试试看行不，其实这个用js很方便的。

追问

不会JS啊，我觉得用纯CSS就能实现的。

追答

对于这个我没有用纯CSS做过，都是用的JS，
你直接定义

function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.border="#538C0F 1px solid";
}

然后再加上一个
onmouseover="imageOver(this)" onmouseout="imageOut(this)"
就可以了

Answer 5

标签名:hover{border:1px solid #f00;}