如何使图像停留在它自己的位置，鼠标在上面
How to make image stay in it's own place on the mouse over
请帮帮我。我已经很努力了，但是什么都没有实现。我想让图像留在自己的地方，即使当鼠标移动到它，我的意思是当鼠标从相关的<li>移动到相关的图像上，图像仍然显示，这是我的整个代码，包括我的悬停菜单，CSS类和JavaScript函数。我用CSS做了悬停，但为了解决这个问题，我尝试了带注释的jQuery函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}
#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}
#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#e9a358;}
#holder ul.sub li.sub-li a.a2 {background:#e9a358;}
#holder ul.sub li.sub-li a.a3 {background:#9ea64b;}
#holder ul.sub li.sub-li a.a4 {background:#dfb344;}
#holder ul.sub li.sub-li a.a5 {background:#b8826e;}
#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}
#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}
#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}
#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}
#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}
#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#ffe398;}
#holder ul.sub li.p2 span {background:#ffe398;}
#holder ul.sub li.p3 span {background:#dee68b;}
#holder ul.sub li.p4 span {background:#fff384;}
#holder ul.sub li.p5 span {background:#f8c2ae;}
</style>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<!--<script type="text/javascript">
$(document).ready(function () { $('a').mouseleave(function () { $(this).unbind("mouseleave"); }); });
</script>
<script type="text/javascript">
$(function()
var timerId;
var ticker = function()
{
timerId = setTimeout(function(){
$('#menuOuter li:first').animate( {marginTop: '-22px'}, 250, function()
{
$(this).detach().appendTo('ul#menuOuter').removeAttr('style');});
ticker();
}, 1500);
};
$('#menuOuter').hover(function() {
$('#menuOuter li:first').stop();
clearTimeout(timerId);
}, ticker);
ticker();
});
</script>-->
<!--<script type="text/javascript">
startList = function () {
var sfEls = document.getElementById("d").getElementsByTagName("li");
for (var i = 0; i < sfEls.length; i++) {
sfEls[i].onmouseover = function () {
for (var j = 0; j < sfEls.length; j++) {
sfEls[j].className = sfEls[j].className.replace(new RegExp(" sub''b"), "");
}
this.className += " sub";
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
</script>-->
</head>
<body id="www-cssplay-co-uk" class="menus">
<div id="holder">
<ul id="menuOuter">
<li class="lv1-li">
<!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]-->
<ul class="sub" id="d">
<li class="sub-li p1 current" href="#url"><a class="a1" href="" >
<img src="a2.jpg" /><b>guest room</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">1</a></li>
<li><a href="#url">2</a></li>
<li><a href="#url">3</a></li>
<li><a href="#url">4</a></li>
<li><a href="#url">5</a></li>
<li><a href="#url">6</a></li>
<li><a href="#url">7</a></li>
</ul>
<span>explainations</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li style="display:block; float:left; width:450px; height:240px" >
<a style="margin-top:200px; width:410px; display:block; padding:0 20px; height:150px; line-height:40px; color:#fff; background-color:#9ea64b"
href="#url"></a>
</li>
<li class="sub-li p5"><a class="a5" href="#url"><img src="pic5.jpg" /><b>baby room</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Sleep Suits</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
</ul>
<span>//</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
顺便说一下，我也试过'removeclass'，但什么也没发生。当尝试函数没有发生任何事情，Firebug给我没有错误，我确信jQuery被调用(因为，例如，我可以很容易地改变鼠标悬停的<a>背景颜色)，但我不能使图像停止，而不是消失。
尝试添加
#holder ul.sub li.sub-li {
display: block;
float: left;
height: 240px;
width: 150px;
z-index: 1;
}
如果这是你想要的，你有一个很奇怪的css
相关文章：
- 跟踪jqplot垂直折线图的鼠标位置
- Javascript-在视频中跟踪鼠标位置
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 如何在鼠标悬停时将对象从起始位置移动到结束位置，然后在鼠标悬停后再次移动
- 如何控制quadraticCurve使用鼠标位置控制位置
- 从鼠标点(及更多）查询位置元素
- 在鼠标上触发鼠标移动'的当前位置
- Javascript如何在不使用画布的情况下获取鼠标位置
- jQuery根据鼠标位置计算DIV偏移量和边界
- 在火狐浏览器的画布上获取鼠标位置
- 尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
- Kinectjs在画布上鼠标向下位置的准确性和clearRect未按预期工作
- Three.js-查找鼠标最后位置和当前位置之间的所有交点
- 在鼠标滚动上将页面内容滚动到自定义位置
- 添加视图框时更改鼠标位置
- Javascript/Canvas-查找相对于坐标网格位置的鼠标坐标
- 如何在鼠标位置获取所有元素
- 鼠标在HTML 5响应画布中的位置
- 查找事件的位置(鼠标悬停在按钮上），用于Firefox扩展
