Fatal编程技术网
  • javascript/
  • Javascript 将鼠标悬停在菜单按钮上时要移动的图标

Javascript 将鼠标悬停在菜单按钮上时要移动的图标

javascript jquery html css

Javascript 将鼠标悬停在菜单按钮上时要移动的图标,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在您阅读本文之前，请访问此网站，了解我正在尝试做什么： 正如你所看到的，菜单下面有一个红色箭头，我想实现的是。。。当我将鼠标悬停在菜单按钮上时，箭头会移动到我正在悬停的同一按钮上，而不会重新加载页面 理想情况下，我希望箭头移回默认按钮。。如果单击其他菜单按钮，也可以更改默认按钮 如果你知道任何链接的例子等。。。我会非常感激的 谢谢你抽出时间 Kerry x制作“按钮”锚定。使用css set为：hover创建规则，以设置包含箭头的背景图像 有很多CSS教程，有很多导航文章。或者，如果你喜欢模仿

在您阅读本文之前，请访问此网站，了解我正在尝试做什么：

正如你所看到的，菜单下面有一个红色箭头，我想实现的是。。。当我将鼠标悬停在菜单按钮上时，箭头会移动到我正在悬停的同一按钮上，而不会重新加载页面

理想情况下，我希望箭头移回默认按钮。。如果单击其他菜单按钮，也可以更改默认按钮

如果你知道任何链接的例子等。。。我会非常感激的

谢谢你抽出时间

Kerry x制作“按钮”锚定。使用css set为
：hover
创建规则，以设置包含箭头的背景图像

有很多CSS教程，有很多导航文章。或者，如果你喜欢模仿别人，就找一个你喜欢的网站，从中找出来源，直到你知道他们是如何做到的

请记住，javascript对于完成您正在做的事情完全不是必需的。除非你想要一些动画，即使CSS可以处理大部分的工作，在我看来纯CSS是更好的方法。

只需将箭头相对于
td
的左侧移动
边距就可以了


$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});


Tp执行此操作将库添加到页面的标题部分


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


编辑：用于恢复箭头原始位置


$(function(){
  currentPos = $("#Arrow").css("margin-left");

  $("#MenuPosition").on("hover","td",function(){
    $("#Arrow").css({"margin-left":$(this).position().left});

  });


   $("#MenuPosition").on("mouseout","td",function(){

     $("#Arrow").css({"margin-left":currentPos});        
  });

});


注意：请查看计算部分并更正


注：无法更正是因为这是我从办公室注销的时间；）。但我想你有逻辑来做这件事第一件事是你有一个错误的DOCTYPE


<!DOCTYPE html PUBLIC "">



您可能需要使用
填充
和
边距
，或者使用
display:block
或
display:inline block
来正确定位箭头。
您可以执行以下操作：

使用跨距将背景箭头添加到HTML中导航/菜单lis下方：


<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
</ul>


最后是使其工作的JS/Jquery：


$(document).ready(function(){     
    Your_menu();
});

function Your_menu(){

    $(".nav li").hover(function(){
            $(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
        },function(){
            $(this).find('.arrow').css({visibility: "hidden"});
    });

}   


这是一个显示以下内容的网站：）


纯CSS解决方案

检查这个答案



所以可能是：


#thething {
    margin: 0;
}
.classone:hover + #thething {
    margin-top: 10px;
    margin-left: 10px;
}



如果他们是父分区中相邻的兄弟姐妹。
链接上的SSL错误…@NuclearGhost只要在浏览器中键入链接就可以了：）@Snuffleupagus我曾尝试使用javascript从头开始构建它，但一直失败，所以我想知道是否有类似的东西可以学习。不要使用表作为菜单。另外，请参见。您希望箭头/移动/到按钮还是/跳转/到按钮？是否有一种方法可以设置默认按钮，以便在鼠标离开按钮后将箭头移回？

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
</ul>



.nav {
    font-size: anypx;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}

.nav li {
    background: #whatev;
    display: block;
    float: left;
    height: anypx;
    line-height: anypx;
    padding: 0;
    text-align: center;
}

.nav li a {
    color: #any;
    display: block;
    padding: any;
    position: relative;
    text-decoration: none;
    width: auto;
}
.arrow {
    background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
    display: none;
    height: anypx;
    text-indent: -9999px;
    width: whatevs;
    z-index: 9999;
}



$(document).ready(function(){     
    Your_menu();
});

function Your_menu(){

    $(".nav li").hover(function(){
            $(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
        },function(){
            $(this).find('.arrow').css({visibility: "hidden"});
    });

}   



#thething {
    margin: 0;
}
.classone:hover + #thething {
    margin-top: 10px;
    margin-left: 10px;
}