css - 悬停在其他div背景图片上时显示div

Question

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

但问题就是这么简单:hover或类似的东西不会切割它，因为那 block 不是正方形。我的意思是当我将鼠标悬停在它的边界上时，我希望那个红色切片出现。 (不是 <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

我建议您使用某种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>";
}

Working jsfiddle: http://jsfiddle.net/Y5vSy/1/

您需要根据需要进行细微调整。但这应该让你继续。