jquery，怎么解决hover事件有子标签造成闪动和执行onmouseout事件

iMouseWu 2013-10-02 08:23:27

<ul class="menu">

<li style="width:29px">

	<a href="">

		<img src="QQ1.png" class="icon" style="bottom: 0px; display: inline; opacity: 1;">

		<img src="QQ.png" class="hover-icon" style="bottom: 150px; display: none; opacity: 1;">

	</a>

</li><ul>

$(".menu li").hover(function(){

    		$(this).find(".icon").stop(true,true).animate({'bottom':"-150px"},"fast");

    		$(this).find(".icon").css('display',"none");

    		$(this).find(".hover-icon").stop(true,true).animate({'bottom':"0px"},"fast");

    		$(this).find(".hover-icon").css('display',"inline");



    	},function(){

    		$(this).find(".hover-icon").stop(true,true).animate({'bottom':"150px"},"fast");

    		$(this).find(".hover-icon").css('display',"none");

    		$(this).find(".icon").stop(true,true).css('display',"inline");

    		$(this).find(".icon").animate({'bottom':"0"},"fast");



    	}

    		);

希望点击这个图片，另外一个图片就会来替换，然后当鼠标移走了以后，又回复到原来的图片！
现在是当鼠标移动到这个Li上时候，会点击到<img》子元素，就会出现闪动，并且只是执行ommouseout事件，不能达到原来的效果！
有没有人能解释下这是为什么？
1.为什么会造成闪动
2.为什么会不断的执行onmouseout事件，而不执行ommouseover事件
3.有什么解决办法？
跪求高人解决！

...全文

197 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

iMouseWu 2013-10-03

打赏
举报

引用 1 楼 u011461314 的回复:

看了半天，原来是 <a> 搞了个重新加载页面。用这效果不累死才怪。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a1 {
	width:300px;
	height:300px;
	border:1px solid #111;
}

.a2,.a3 {
	width:100px;
	height:100px;
	background-color:#a11;
}
.a3 {
	background-color:#9e1;
	display:none;
}

</style>
</head>
<body>
<div id='waitover' class='a1'>
<a href=''>
<span class='a2'>XXXX</span>
<span id='show' class='a3'>OOOO</span>
</a>
</div>
<script>
document.getElementById("waitover").onmouseover = function(){
	document.getElementById('show').style.display = 'inline';
}
</script>

</body>
</html>

请问。能否说的具体点？

zhjdg 2013-10-02

打赏
举报

看了半天，原来是 <a> 搞了个重新加载页面。用这效果不累死才怪。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a1 {
	width:300px;
	height:300px;
	border:1px solid #111;
}

.a2,.a3 {
	width:100px;
	height:100px;
	background-color:#a11;
}
.a3 {
	background-color:#9e1;
	display:none;
}

</style>
</head>
<body>
<div id='waitover' class='a1'>
<a href=''>
<span class='a2'>XXXX</span>
<span id='show' class='a3'>OOOO</span>
</a>
</div>
<script>
document.getElementById("waitover").onmouseover = function(){
	document.getElementById('show').style.display = 'inline';
}
</script>

</body>
</html>

目录： 1.2017-12-24（第一天Web项目）： 2.2017-12-25（第二天表格）： 3.2017-12-25（第二天框架及表单）： 4.2017-12-26（第三天CSS语言）： 5.2017-12-28（DIV+CSS）： 6.2017-12-29（JavaScript）: 7.jQuery: 8.表单验证+正则表达式+BootStr...

canrun 目录列表： 1.RandomNum 随机数 2.in_array判断 3.shuffle 数组乱序 4.is_function 是否函数 5.base64_encode 类php base64_encode函数 6.base64_decode 类php base64_decode函数 7.getImageFilesize 获取图片filesize 8.prDat...

一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了...

前端快速入门到高级工程师概述前端开发工程师是Web前端开发工程师的简称，2007年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML（标准通用标记语言下的一个应用）、级联样式表和JavaScript。前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，...

http://www.bubuko.com/infodetail-800056.html mobileTechA useful tools or tips list for mobile web application developing这个项目收集移动端开发所需要的一些资源与小技巧工具类网站HTML5 与 CSS3 技术应用评估各种奇妙的hack几乎所有设备的屏幕尺寸与像素密度表移动设备参数表