当用光标悬停时,如何在CSS三角形上保持适当的边界？

Question

是否有可能将悬停固定在http://jsfiddle.net/2AXhR/上,以便在悬停时激活正确的三角形而不是有时相邻的三角形？有时错误的三角形被激活,因为每个三角形元素的边界区域实际上不是一个三角形,而是一个矩形,所以即使光标看起来在一个三角形的顶部,它实际上位于另一个三角形重叠的顶部并具有更高的z指数.

  <style type="text/css">
  .t {
     position:relative;
     top:55px;
     left:5px;
  }
  .t div {
     position:absolute;
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 0 100px 173.2px 100px;
     border-color: transparent transparent #0079c5 transparent;
     transition:all 1s;
     -webkit-transition:all 1s;
     -moz-transition:all 1s;
     cursor:pointer;
     transform-origin:200px 173px;
     -webkit-transform-origin:200px 173px;
     -moz-transform-origin:200px 173px;
     z-index:10;
  }
  .t div:hover {
      z-index:20;
      border-color: transparent transparent #009cff transparent;
  }
  .t div:nth-child(1) {
     transform:rotate(30deg);
     -webkit-transform:rotate(30deg);
     -moz-transform:rotate(30deg);
  }
  .t div:nth-child(1):hover {
     transform:rotate(30deg) translate(-15%, -10%);
     -webkit-transform:rotate(30deg) translate(-15%, -10%);
     -moz-transform:rotate(30deg) translate(-15%, -10%);
  }
  .t div:nth-child(2) {
     transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
  }
  .t div:nth-child(2):hover {
     transform:rotate(90deg) translate(-15%, -10%);
     -webkit-transform:rotate(90deg) translate(-15%, -10%);
     -moz-transform:rotate(90deg) translate(-15%, -10%);
  }
  .t div:nth-child(3) {
     transform:rotate(150deg);
     -webkit-transform:rotate(150deg);
     -moz-transform:rotate(150deg);
  }
  .t div:nth-child(3):hover {
     transform:rotate(150deg) translate(-15%, -10%);
     -webkit-transform:rotate(150deg) translate(-15%, -10%);
     -moz-transform:rotate(150deg) translate(-15%, -10%);
  }
  .t div:nth-child(4) {
     transform:rotate(210deg);
     -webkit-transform:rotate(210deg);
     -moz-transform:rotate(210deg);
  }
  .t div:nth-child(4):hover {
     transform:rotate(210deg) translate(-15%, -10%);
     -webkit-transform:rotate(210deg) translate(-15%, -10%);
     -moz-transform:rotate(210deg) translate(-15%, -10%);
  }
  .t div:nth-child(5) {
     transform:rotate(270deg);
     -webkit-transform:rotate(270deg);
     -moz-transform:rotate(270deg);
  }
  .t div:nth-child(5):hover {
     transform:rotate(270deg) translate(-15%, -10%);
     -webkit-transform:rotate(270deg) translate(-15%, -10%);
     -moz-transform:rotate(270deg) translate(-15%, -10%);
  }
  .t div:nth-child(6) {
     transform:rotate(330deg);
     -webkit-transform:rotate(330deg);
     -moz-transform:rotate(330deg);
  }
  </style>

  <div class="t">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
  </div>

Answer 1

-----版本2,更清洁,更好(修复IE和FF问题)-----

更正的问题:

1. IE忽略了该overflow:hidden;属性,并且悬停事件在可见三角形之外被触发.
2. 出于某种原因,在Firefox中的三角形上有一些线条.
3. 如果光标位于三角形之间,则光标返回默认值.

说明:

这个方法skewX()用于创建三角形.你不需要"边界技巧"来创建它们,也不需要overflow属性.使用这种技术,根本没有重叠元素,因此悬停事件不能同时触发两个元素.

第二个div隐藏了倾斜元素的一半以创建三角形,并使用+CSS选择器在悬停时进行翻译.

----- DEMO V2 -----

加价:

<div class="t">
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
   <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
    <div class="wrap">
        <div class="triangle"></div>
        <div class="mask"></div>
    </div>
</div>

CSS:

.t div{
    position:absolute;
    top:0; left:0;

    transform-origin:0 0;
    -ms-transform-origin:0 0;
    -webkit-transform-origin:0 0;

    transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
}

.t .wrap{
    top:50%; left:50%;

    -ms-transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}

.t .wrap .triangle {
    position:relative;
    width: 200px;
    height: 173px;
    background-color: #0079c5;
    cursor:pointer;
    z-index:1;
}
.t .wrap .mask{
    width:100%;
    height:115.5%;
    background-color: #fff;
    left:100%;
    z-index:2;

    -ms-transform: skewX(-30deg) rotate(30deg);
    -webkit-transform: skewX(-30deg) rotate(30deg);
    transform: skewX(-30deg) rotate(30deg);
} 

.t .wrap .triangle:hover{
    background-color: #009cff;

    transform:  translate(10%, 10%);
    -webkit-transform: translate(10%, 10%);
    -moz-transform: translate(10%, 10%);
}

.t .triangle:hover + .mask{
    -ms-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
    -webkit-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
    transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
}

.t > div:nth-child(2){
    -ms-transform: rotate(60deg) skewX(30deg);
    -webkit-transform: rotate(60deg) skewX(30deg);
    transform: rotate(60deg) skewX(30deg);
}
.t > div:nth-child(3){
    -ms-transform: rotate(120deg) skewX(30deg);
    -webkit-transform: rotate(120deg) skewX(30deg);
    transform: rotate(120deg) skewX(30deg);
}

.t > div:nth-child(4){
    -ms-transform: rotate(-60deg) skewX(30deg);
    -webkit-transform: rotate(-60deg) skewX(30deg);
    transform: rotate(-60deg) skewX(30deg);
}
.t > div:nth-child(5){
    -ms-transform: rotate(-120deg) skewX(30deg);
    -webkit-transform: rotate(-120deg) skewX(30deg);
    transform: rotate(-120deg) skewX(30deg);
}
.t > div:nth-child(6){
    -ms-transform: rotate(-180deg) skewX(30deg);
    -webkit-transform: rotate(-180deg) skewX(30deg);
    transform: rotate(-180deg) skewX(30deg);
}

Vesrion 1(原创):演示V1的小提琴