Question

好的，请耐心等待我的解释，因为你可能会理解......但是！

我想做的是，与Chrome的标签上的方式类似，你会得到奇怪的光环＆＃39;想想跟随鼠标光标，但我真正想要做的就是让你的鼠标光标移动到哪里，你就得到了一个“下垂”。在菜单项上。我希望它是微妙的，所以请看这里的示例图像

example 当鼠标悬停在其所在区域时，下垂需要跟随光标。

我有一个非常非常粗略的想法......

jsfiddle codesnippet：

$(document)
.mousemove(function(e){
    $(".image").css({left:e.pageX-75, top:e.pageY-31});
});

我似乎无法找到一个我想要的例子，但这可能是因为我不知道该问什么......

希望人们可以提供帮助！

安迪

Answer 1

当我们将鼠标悬停在菜单上时，你想显示弯曲的设计吗？。

$(document).mousemove(function(e){

鼠标悬停效果将应用完整文档。将此更改为菜单div

HTML：

<div id="menuitem">
<img class="image" src="http://staging.tradeinchecker.com/andydev/w1t/drip.png"/>
Home</div>

JavaScript的：

$("#menuitem").mousemove(function(e){
$(".image").css({left:e.pageX-75});});

试试这个

Answer 2

所以我做了这个CodePen它并不完美，但它应该给你一般的想法，我有点匆忙，抱歉这个

var divPos = {};
$("svg").mousemove(function(e){
    var position = $(this).offset();
    divPos = {
        left: e.pageX - position.left,
        top: e.pageY - position.top
    };
  var d = $(this).children('path').attr('d');
  var q = d.split(',');
  var q2 = q[1].split(" ");
  var qX = divPos.left;
  var qY = divPos.top;
  var dRebuild = q[0]+",Q"+qX+" "+qY+","+q[2];
  var svgParent = $(this);
  svgParent.children('path').attr('d',dRebuild+" ");
  $(this).mouseleave(function(){
    dRebuild = q[0]+",Q0 0,"+q[2];
    svgParent.children('path').attr('d',dRebuild+" ");
  });
});

鼠标悬停在菜单项上

2 个答案: