html – CSS3旋转转换导致间歇性鼠标单击检测

前端之家收集整理的这篇文章主要介绍了html – CSS3旋转转换导致间歇性鼠标单击检测前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这与 CSS3 Rotate on animated element causing click event not to invoke非常相似

虽然我的问题有点不同,加上无法评论添加支持信息.

查看我的沙箱:http://jsfiddle.net/5bsG3/2/

在鼠标悬停时,我有一个围绕Y轴旋转的链接.点击事件(对于jQuery或仅用于链接导航)并不总是被检测到.尝试单击链接的填充区域(仅在文本旁边但在链接上).这几乎就像是命中检测有问题,因为跨度是旋转的,因此在鼠标没有点击跨度的角度.即使鼠标仍然点击LINK的填充区域.大约70-110度的角度似乎是个问题.

上述帖子中提出的解决方案实际上并未解决此问题.此外,我的问题可能有点不同,因为我的旋转被处理为CSS转换而不是JS间隔触发器.

有什么想法吗?谁看过这个吗?我知道这是一种简洁的链接方式,但对于目标网站来说,这是一个可接受的数量奶酪.

随意简化jsfiddle,我开始简单并添加了一些调试信息来帮助识别问题.

HTML:

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

CSS:

ul li
{
    display: inline;
    float: left ;
}

.flip-link
{
    float:left ;
}

span
{
    float:left ;
}


.flip-link {
    display: block;
    overflow: hidden;

    height: 20px;
    padding: 5px 50px 7px 50px ;
    margin-right: 10px ;

    background: #AAA;

    -webkit-perspective: 50px;
       -moz-perspective: 50px;
        -ms-perspective: 50px;
            perspective: 50px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}

.flip-link span {
    display: block;
    position: relative;

    background: #EEE;

    padding: 0px 10px ;

    -webkit-transition: all 1000ms ease;
       -moz-transition: all 1000ms ease;
        -ms-transition: all 1000ms ease;
            transition: all 1000ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

}
    .flip-link:hover span
    {
        -webkit-transform: translate3d( 0px,0px,0px ) rotateY( 360deg );
           -moz-transform: translate3d( 0px,0px ) rotateY( 360deg );
            -ms-transform: translate3d( 0px,0px ) rotateY( 360deg );
                transform: translate3d( 0px,0px ) rotateY( 360deg );

        color: #55FF55 ;
    }

JS:

var linkClickCount = 0 ;
var spanClickCount = 0 ;

$(document).ready(function () {
    $('.flip-link').click(function () {
            linkClickCount++ ;            
            $("#LinkCounter").text(linkClickCount);

            return (false);
    });

    $('.flip-link span').click(function () {
            spanClickCount++ ;            
            $("#SpanCounter").text(spanClickCount);
    });
});

解决方法

问题.由于存在使用CSS的浏览器差异,甚至浏览器之间的差异,因此使用纯CSS解决方案时会遇到问题.你还必须意识到,当CSS处于动画中间时,它实际上会折叠你的div.我们的愿景实际上并不是正在发生的事情,它实际上将div大小折叠为0,这意味着当你点击时你无法“实际点击它.下面,显示你应该把一个绝对定位的div作为叠加并处理点击即使是一个清晰的,不可见的div,仍会有你实际点击链接的错觉.
<a id="link"></a>

 $("#link").click(function(){

spanClickCount++;
$("#SpanCounter").text(spanClickCount);

}
原文链接:https://www.f2er.com/html/227425.html

猜你在找的HTML相关文章