Question

我在我的网站上使用此动态重点作为参考：https://css-tricks.com/examples/MovingHighlight/

<script>
var originalBG = '',
    lightColor = 'fff',
    gradientSize = 500;

$('.navigation .flex, .navigation a, .black')
.mousemove(function(e) {
    originalBG = $(".navigation .flex, .black").css("background-color");
    x  = e.pageX - this.offsetLeft;
    y  = e.pageY - this.offsetTop;
    xy = x + " " + y;

    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 400, from(rgba(255,255,255,0.2)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
      .css({ background: bgWebKit })
      .css({ background: bgMoz });

}).mouseleave(function() {
        $(this).css({ background: originalBG });
});
</script>

我尝试删除各种脚本等，但似乎没有任何工作。任何想法为什么我没有在主页上看到渐变？

Answer 1

删除父元素position:relative;解决了这个问题。

移动突出显示在一个页面上工作，但不在另一个页

1 个答案: