圆形的div

Question

我正在尝试创建一个网页设计，有一些奇怪的形式，如下所示：

当用户悬停在1个部分时，后台应仅为其更改：

第二个和第三个相同：

希望我很清楚......

我不知道应该使用什么技术来实现这种效果。有人可以帮忙吗？

Answer 1

可以在悬停时使用带有图像替换的绝对定位的png，然后在其中抛出一个矩形div

Answer 2

有两种方法：

1. 使用SVG绘制形状，并为旧版IE提供后备。

2. 使用背景图片。在正常形状的div上。

Answer 3

我会使用三个单独的图像，每个图像都有整个背景和一个“选定”区域 - 在悬停div时，只需将背景替换为div为“已选择”的背景。

JS代码的快速示例：

function ReplaceBg(oDiv, num) {
   oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}

function RestoreBg(oDiv) {
   oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}

HTML：

<div style="background-image: url(images/background.png);">
   <div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
   <div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
   <div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>

希望这个想法足够清楚......

Answer 4

有一个CSS3语法boreder-radius，你可以用它来做，但你已经在这里做了工作，我的意思是你已经设置了随机像素并寻找最适合的像素。例如，这里是 - http://jsfiddle.net/divinemamgai/Ld7He/

OR

也许您应该将主要背景图像保持为图像1和3的白色，而图像2使用png  基于背景图片并使用Jquery在鼠标悬停时更改它，并且不要忘记为图片z-index保留最高2。

希望这会对你有所帮助。

Answer 5

愿这有用http://jsfiddle.net/JeaffreyGilbert/G3VG7/