javascript – 可以有非矩形div吗?

我需要以以下形状塑造一个div标签

shape of div that I’m looking for http://bytes.com/attachments/attachment/5205d1307460155/div.jpg

是否可以使其跨浏览器?我不一定需要圆角.我需要它,所以我可以改变悬停的整个div的边框的颜色,所以我认为它不能通过使用两个div的实现.

解决方法

是的,你可以使用HTML和CSS这样做: http://jsfiddle.net/broofa/364Eq/

它基本上使用三个div来聚合鼠标事件,像这样:

<div id="outer">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

而我使用:在外部元素上的悬停规则影响内部div的边框颜色:

#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}

这个标记的唯一怪癖是,内容区域 – 您在图像中绘制的区域是,它是两个div,而不是一个div.所以文本不会包装和流动你可能期望的方式.此外,在旧版(IE6-7)浏览器上可能无法正常工作.但是,FF,Chrome,Safari,Opera应该还可以.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...