将鼠标悬停在菜单按钮上时要移动的图标
[英]Icon to move when hovering over a menu button
问题描述
Before you read this please get up this website to see what I am trying to do: 
在阅读此内容之前，请先访问此网站以查看我要执行的操作：
https://www.kris-willis.com https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page. 如您所见，菜单下方有一个红色箭头，而我想要实现的是...当我将鼠标悬停在菜单按钮上时，箭头移动到了我要悬停的相同按钮上，而无需重新加载页。
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button. 理想情况下，我希望箭头移回默认按钮。如果单击其他菜单按钮，默认按钮也会更改。
If you know any links to examples etc... I would really appreciate it! 如果您知道与示例等的任何链接，我将不胜感激！
Thank you for your time, 感谢您的时间，
Kerry x 嘉里x
5 个解决方案
解决方案1
0 2012-12-28 15:47:27
Make the "buttons" anchors. 制作“按钮”锚点。 Using css set create a rule for :hover to set a background image that contains the arrow. 使用css set为:hover创建规则以设置包含箭头的背景图像。
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. 有很多CSS教程， Nettuts和Webdesigntuts上有很多导航文章。 Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it. 或者，如果您愿意模仿其他人，请找到一个您喜欢的网站，然后将其分开，直到弄清楚他们是如何做到的。
Keep in mind that javascript is not at all necessary to accomplish what you are doing. 请记住，完全不需要javascript即可完成自己的工作。 Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach. 除非您需要一些动画，否则CSS可以处理大部分工作，我认为纯CSS是更好的方法。
解决方案2
0 2012-12-28 15:51:44
Just move the arrow by margin-left with respect to left of the td DEMO 只需将箭头相对于td DEMO的左侧向左移动margin-left
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page TP这样做将jQuery libirary添加到页面的头部
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page 将此代码添加到外部js文件中，并将其添加到页面的头部
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use 编辑：恢复箭头原始位置使用
$(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});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT. 注意：请参阅计算部分并进行纠正。
PS: cant correct is because its my log out time from office ;) . PS：无法纠正是因为它是我从办公室注销的时间；）。 but i thing you got the logic to do it 但我想你有逻辑去做
解决方案3
0 2012-12-28 15:52:56
The first thing is that you have a wrong DOCTYPE. 第一件事是您的DOCTYPE错误。
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. 这将导致页面以怪异模式加载。 Change it to 更改为
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI. 用于HTML5或使用完整的版本（包括FSI和FPI）。
Second is you are using a <table> for navigation. 其次是您正在使用<table>进行导航。 Nothing seriously wrong with it but people tend to use ul 没什么大不了的，但是人们倾向于使用ul
For the :hover , you can simply use 对于:hover ，您可以简单地使用
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly. 您可能需要使用paddings和margins或者使用display: block或display: inline-block来正确paddings箭头。
解决方案4
0 2012-12-28 16:08:38
You can do something like this: 您可以执行以下操作：
Using a span to add the bg arrow below the nav/menu lis in the HTML: 使用跨度将bg箭头添加到HTML中的导航/菜单列表下方：
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<span class="arrow"> </span>
</li>
<li>
<a href="#">Menu 2</a>
<span class="arrow"> </span>
</li>
</ul>
The CSS: CSS：
.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;
}
And Finally the JS/Jquery that makes it work: 最后是使其工作的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"});
});
}
Here is a site that is showing this :) 这是一个显示此内容的网站：)
http://www.drexelmedicine.org/ http://www.drexelmedicine.org/
解决方案5
0 2012-12-28 16:37:18
PURE CSS SOLUTION 纯CSS解决方案
Check this answer. 检查此答案。
Is there any way to hover over one element and affect a different element? 有什么方法可以将鼠标悬停在一个元素上并影响另一个元素？
So it might be: 因此可能是：
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div. 如果它们是父div中的相邻兄弟姐妹。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.