是否可以修复悬停在 http://jsfiddle.net/2AXhR/ 上的问题以便在悬停时激活正确的三 Angular 形而不是有时相邻的三 Angular 形?有时会激活错误的三 Angular 形,因为每个三 Angular 形元素的边界区域实际上不是三 Angular 形,而是矩形,因此即使光标可能看起来位于一个三 Angular 形的顶部,但它实际上位于另一个重叠并具有更高的 z-index。
<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>
最佳答案
----- 版本 2,更干净,更好(修复 IE 和 FF 问题)-----
更正的问题:
- IE 忽略了
overflow:hidden;
属性,悬停事件在可见三 Angular 形外触发。 - 出于某种原因,firefox 中的三 Angular 形上出现了线条。
- 如果光标位于三 Angular 形之间,则光标返回默认值。
描述:
此方法使用 skewX()
来创建三 Angular 形。您不需要“边框技巧”来创建它们,也不需要 overflow
属性。使用这种技术,根本就没有重叠元素,因此悬停事件不能同时触发两个元素。
第二个 div 隐藏了一半的倾斜元素以创建三 Angular 形,并在悬停时使用 +
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);
}
版本 1(原始):fiddle for demo V1
关于javascript - 使用光标悬停时如何在 CSS 三 Angular 形上保持适当的边界?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23107646/