使用CSS和/或JavaScript与可堆叠的可点击形状重叠？

Question

这对我来说很难描述，所以请忍受。

我需要为网站建立一个“ upvote”控件。 “ upvotes”的数量可以在系统设置中配置。 控件应该看起来像绿色的人字形朝上。 如果有三个，则单击顶部的一个，则表示您已有效地“投票”了权重3。如果您随后单击底部的V形，则实际上是将投票权重更改为1。也有悬停，单击，以及与人字形相关的积极造型。

线框显示这些人字形非常紧密地堆叠在一起，在我的3票示例中，底部人字形的上点高于顶部人字形的底点。

我认为这种排序使我无法使用图像，因为重叠将很难管理。 因此，我希望有一种相对简单的方法来使用CSS和/或JavaScript“构建”这些形状并将它们视为标准div。

我有麻烦吗？ 还是有一个相对简单的方法可以与所有现代浏览器（IE 9+）兼容？

Answer 1

这将使您从前端侧开始。 至少关于从那里去的方向。 使用一些JS和后端编程，您将能够使那些字体超棒的图标注册为1、2或3

的HTML

<div class="container">
    <div class="rating">
        <div class="upvote">
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
        </div>
        <span class="divider"></span>
        <div class="downvote">
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
        </div>
    </div>
</div>

的CSS

.rating{
    margin-top:30px;
}
.rating > div {
  position: relative;
  width: 1.1em;
  margin:-10px auto;
}

.rating .fa{
    font-size:32px;
    line-height: 0;
}
.rating .divider{
    width:40px;
    display:block;
    border-bottom: 3px solid black;
    height:5px;
    text-align:center;
    margin: 15px 458px 25px;

}
.upvote > div .fa-chevron-up:hover,
.upvote > div:hover ~ div .fa-chevron-up {
   color: green;
}

.downvote > div .fa-chevron-down:hover,
.downvote > div:hover ~ div .fa-chevron-down {
   color: red;
}

ps正如您可能已经知道的那样，CSS不会遍历，因此您需要一些帮助将悬停属性分配给downvote部分。 如果到明天没有其他人有这个答案，我会为您构建。

这是演示

Answer 2

SVG人字形

如果使用svg创建此形状，则每个形状都有其自己的边框。 因此，使用悬停状态时，语句只会在其形状内触发。
对于单击，我向每个形状添加了javascript和id。

 var down1 = document.getElementById("down1"); var down2 = document.getElementById("down2"); var down3 = document.getElementById("down3"); var up1 = document.getElementById("up1"); var up2 = document.getElementById("up2"); var up3 = document.getElementById("up3"); function pling() { alert(this.id); } down1.addEventListener("click", pling); down2.addEventListener("click", pling); down3.addEventListener("click", pling); up1.addEventListener("click", pling); up2.addEventListener("click", pling); up3.addEventListener("click", pling); 

 #center { fill: #222; stroke: #bbb; stroke-width: 0.5; } .up { fill: #5a5; cursor: pointer; } .up:hover { fill: #262; stroke: green; stroke-width: 0.1; } .down { fill: #322; cursor: pointer; } .down:hover { fill: #a55; stroke: red; stroke-width: 0.1; } 

 <svg viewBox="0 0 50 100" width="100px" xmlns="http://www.w3.org/2000/svg"> <polygon id="center" points="5,50 25,30 45,50, 25,70 5,50" /> <polygon id="down3" class="down" points="5,70 25,90 45,70 45,80 25,100 5,80" /> <polygon id="down2" class="down" points="45,60 25,80 5,60 5,70 25,90 45,70" /> <polygon id="down1" class="down" points="5,50 25,70 45,50 45,60 25,80 5,60" /> <polygon id="up1" class="up" points="5,50 25,30 45,50 45,40 25,20 5,40" /> <polygon id="up2" class="up" points="5,40 25,20 45,40 45,30 25,10 5,30" /> <polygon id="up3" class="up" points="5,30 25,10 45,30 45,20 25,0 5,20" /> </svg>