悬停时,将导航图标从当前页面项目移动到悬停

Posted

技术标签:

【中文标题】悬停时,将导航图标从当前页面项目移动到悬停【英文标题】:On hover, move the navigation's icon from current page item to the hovering 【发布时间】:2013-04-02 03:41:09 【问题描述】:

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

但现在,我想推进它并为其添加一个漂亮的过渡效果。想法是将当前页面项目的图标移向悬停元素。

因此,如果您正在启动并将鼠标悬停在“Vertrieb”上,则文本上方的指针应移动到 Vertrieb。

如果您在“referenzen”上并转向“博客”或“über mich”,它应该转向它。

有什么想法吗?我已经用文本转换做了很多导航,但这超出了我的技能水平。

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;
    

【问题讨论】:

请贴一些代码。 互联网上到处都是关于这个主题的演示,即使是纯 CSS 也是如此。做更多的研究;) @Allendar 嘿,我搜索了几个小时,德语和英语。因为我不是说英语的母语,所以我不确定我要搜索什么并且可能错过了它。能给个关键字吗? @user1479606 我正在寻找代码,我没有。除了基本的 html/css 标记。 我不会把它作为答案发布,因为我有一个懒惰的一天,无论如何都是用 jQuery 做的:P jsfiddle.net/Allendar/CwnFt。快乐编码:) 【参考方案1】:

从 cmets 转录;

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');
    );
);

【讨论】:

谢谢,就像一个魅力!除了一件事。我更改了一些参数,一切正常,但是否可以将它的起始位置放在 current_page_item 上? 调整了有/没有类存在的初始设置,并正确设置了初始颜色; jsfiddle.net/Allendar/CwnFt/32 嘿,这不会改变它。我用谷歌搜索了另一轮,一个人说它可能与鼠标悬停在一起,这也让指针/效果停留在最后一个悬停位置而不是返回。我目前正在尝试解决这个问题或学习如何 a)将 current_page_item 作为起始元素,b)一旦我离开悬停,它就会回到 current_page_item 。感谢您的帮助,艾伦达! 你用的是什么浏览器? javascript 是超级基础的,它在其他浏览器中的行为不应有所不同。检查我的最后一个示例(编号 32)。 我使用的是最新版本的 Chrome。我会检查它并在我尝试它并用谷歌搜索更多时给你回电!谢谢!

以上是关于悬停时,将导航图标从当前页面项目移动到悬停的主要内容,如果未能解决你的问题,请参考以下文章

悬停链接时,将Div水平移动到当前悬停的链接位置。

关闭多级 jquery 下拉菜单

导航悬停在桌面,点击移动

由于悬停时的转换/缩放,在移动设备上难以滚动

导航悬停项目而不移动

与移动设备的悬停下拉菜单链接