Question

我想创建一个看起来like this的菜单。当我鼠标悬停时，我希望它看起来像这样：

enter image description here

但问题是简单的:hover或类似的东西不会削减它，因为那件不是正方形。我的意思是当我将鼠标悬停在它的边界上时，我想要出现那个红色切片。（不是<div>用来描述它的方框）

这是我用于红色背景的CSS：

#miscBTNhover {
    background-image:url(file:///C|/Users/Jankis/Documents/servergaming/img/Untitled-2.gif);
    width:113px;
    height:78px;
    position:absolute;
    left:21px;
    top:0px;
}

Answer 1

您可以尝试为每个菜单项使用旋转的div。

rotated divs image

Answer 2

我建议您选择某种 jQuery插件，让您的生活更轻松。您可以使用各种 jQuery图表插件来实现您的目标。

一些好的：

http://www.jqplot.com/tests/pie-donut-charts.php

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

如果您想坚持使用css3，请使用以下教程：

http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

如果你选择第二个，只需添加悬停效果，如下所示：

#pieSliceRed2 .pie:hover{
  background-color:#1d1d1d;
}

更新

我构建了一个快速小样本来帮助您入门，我使用了FlotCharts插件（http://www.flotcharts.org/flot/examples/series-pie/index.html）

<强> HTML

<div id="content">
  <div class="demo-container">
   <div id="placeholder" class="demo-placeholder"></div>
  </div>
</div>

<强> CSS

* { padding: 0; margin: 0; vertical-align: top; }

body {
    font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}

a { color: #069; }
a:hover { color: #28b; }

h2 {
    margin-top: 15px;
    font: normal 32px "omnes-pro", Helvetica, Arial, sans-serif;
}

h3 {
    margin-left: 30px;
    font: normal 26px "omnes-pro", Helvetica, Arial, sans-serif;
    color: #666;
}

p {
    margin-top: 10px;
}


#content {
    width: 880px;
    margin: 0 auto;
    padding: 10px;
}


.demo-container {
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.pie-link
{
    color:White;
    font-weight:bold;
}
.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table {
    border-spacing: 5px;
}

<强>的jQuery

$(function () {
    var data = [],
    series = 4;

    //for (var i = 0; i < series; i++) {
        data[0] = {
            label: "<a class='pie-link' href='#'>News</a>",
            data: 22
        }

        data[1] = {
            label: "<a class='pie-link' href='#'>Misc</a>",
            data: 22
        }

        data[2] = {
            label: "<a class='pie-link' href='#'>Events</a>",
            data: 22
        }

        data[3] = {
            label: "<a class='pie-link' href='#'>Disclaimer</a>",
            data: 22
        }
    //}

    var placeholder = $("#placeholder");

    placeholder.unbind();

    $.plot(placeholder, data, {
        series: {
            pie: {
                show: true,
                radius: 1/2,
                startAngle: 3 / 4,
                label: {
                    show: true,
                    radius: 1 / 4,
                    formatter: labelFormatter,
                    background: {
                        color: "#1d1d1d"
                    }
                }
            }
        },
        legend: {
            show: false
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });

    $('.pie-link').click(function (e) {
        alert($(this).html());
    });
});

function labelFormatter(label, series) {
    return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "</div>";
}

工作jsfiddle：http://jsfiddle.net/Y5vSy/1/

您需要根据需要进行微调。但这应该让你前进。

当盘旋在其他div背景图像时显示div

2 个答案:

更新