在悬停时，将导航图标从当前页面项目移动到悬停位置

Question

我正在创建导航。到目前为止，我有一个bg-image，用于悬停/当前页面项目，该项目刚刚出现在悬停/当站点处于活动状态时。

但现在，我想推进它，并添加一个很好的过渡效果。这个想法是将当前页面项目的图标移动到悬停元素。

所以，如果你在开始和悬停在“VERTRIEB”文本应该移动到上面VERTRIEB指针。

如果您正在参与'引用'并转向'博客'或'übermich'，它应该朝着它迈进。

什么想法？我已经通过文字转换做了很多导航，但这是超过我的技能水平。

PS：这里的标记：

<ul class="nav"> 
    <li><a href="index.html" title="Start" class="current_page_item">Start</a></li> 
    <li><a href="about.html" title="Über mich">Über mich</a></li> 
    <li><a href="philosophie.html" title="Philosophie">Philosophie</a></li> 
    <li><a href="referenzen.html" title="Referenzen">Referenzen</a></li> 
    <li><a href="vertrieb.html" title="Vertrieb">Vertrieb</a></li> 
    <li><a href="coaching.html" title="Coaching">Coaching</a></li> 
    <li><a href="kontakt.html" title="Kontakt">Kontakt</a></li> 
    <li><a href="blog.html" title="Blog">Blog</a></li> 
</ul> 




ul.nav { 
    position: relative; 
    float: right; 
    margin: 28px 10px 0 0; 
    } 

ul.nav li { 
    padding: 0 20px 0 0; 
    float: left; 
    list-style: none; 
    } 

ul.nav li a { 
    display: block; 
    padding: 30px 0 0 0; 
    font-size: 0.9375em; 
    -webkit-transition-property:color, text, background; 
    -webkit-transition-duration: 0.25s, 0.25s, 0.25s; 
    -webkit-transition-timing-function: linear, ease-in; 
    -moz-transition-property:color, text; 
    -moz-transition-duration:0.25s; 
    -moz-transition-timing-function: linear, ease-in; 
    -o-transition-property:color, text; 
    -o-transition-duration:0.25s; 
    -o-transition-timing-function: linear, ease-in; 
    } 

ul.nav li a:hover, 
ul.nav li a:focus, 
ul.nav li a.current_page_item { 
    color: #e86228; 
    background: url(images/nav_pointer.png) no-repeat top; 
    } 

Answer 1

从注释转录;

JSfiddle (example with jQuery)

CSS

* { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#menu_wrap { 
    border: 1px dotted blue; 
    padding: 5px; 
} 
#nav { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    position: relative; 
} 
#nav li { 
    display: inline-block; 
    margin-right: 15px; 
} 
#nav li:last-child { 
    margin-right: 0px; 
} 
#nav li a { 
    color: #444; 
    text-decoration: none; 
} 
#arrow { 
    background-image: url('http://www.jukti.com/wp-content/uploads/2011/07/google_pointer_map.png'); 
    background-size: 25px 35px; 
    height: 35px; 
    width: 25px; 
    margin-bottom: 10px; 
} 

的JavaScript

$(document).ready(function() { 
    $('#nav li').mouseover(function() { 
     var pos = $(this)[0].offsetLeft; 
     pos = pos + Math.floor((($(this).css('width').replace('px', '') * 1)/2)); 
     pos = pos - Math.floor(($('#arrow').css('width').replace('px', '') * 1)/2) 

     // Reset all colors 
     $('#nav li a').css('color', '#444'); 

     // Animte the arrow 
     $('#arrow').animate({ 
      'margin-left': pos + 'px' 
     }, 250); 

     // Change the color 
     $('a', this).css('color', 'orange'); 
    }); 
});