鼠标悬停在菜单项上

Question

好的，请多多包涵，因为我解释起来很混乱，你们可能也很难理解……但是！

我想做的，类似于在 chrome 的选项卡上你会得到奇怪的 'Aura' think following the mouse cursor，但我真正想做的是这样无论您的鼠标光标移到哪里，您都会在菜单项上看到 'droop'。我希望它是微妙的，所以请在此处查看示例图片

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

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

jsfiddle 代码片段：

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

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

希望大家帮帮忙！

安迪

Answer 1

你想在鼠标悬停在菜单上时显示弧形设计吗？

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

鼠标悬停效果将完全应用到菜单 document.change 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+" ");
  });
});

鼠标悬停在菜单项上

mouse over droop on menu item

css

jquery

hover