关于鼠标进入、离开、点击事件的有关问题

关于鼠标进入、离开、点击事件的问题

 

    <ul>

	<li>

		<span>

			<a href=""  >首页</a>

		</span>

	</li>

	<li>

		<span>

			<a href="">关于</a>

		</span>

	</li>

	<li>

		<span >

			<a  href="">案例</a>

		</span>

	</li>

	<li>

		<span >

			<a href="" >开发</a>

		</span>


	</li>

	<li>

		<span>

			<a href="">流程</a>

		</span>

	</li>

	<li>

		<span >

			<a href="">联系方式</a>

		</span>

	</li>

</ul>

例如以上代码，我想让鼠标移动到元素上的时候<span>背景和字体颜色会变。离开时也会变。点击元素之后背景和字体颜色改变，离开之后不再触发鼠标离开时事件。以后我鼠标移在另外元素上，该元素背景和字体颜色也会变，而前次点击过的元素背景和颜色不变。点击另外元素则前次点击过的元素背景和颜色改变，本次点击的元素背景和颜色也改变
------解决思路----------------------

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

<ul>

    <li>

        <span>

            <a href=""  >首页</a>

        </span>

    </li>

    <li>

        <span>

            <a href="">关于</a>

        </span>

    </li>

    <li>

        <span >

            <a  href="">案例</a>

        </span>

    </li>

    <li>

        <span >

            <a href="" >开发</a>

        </span>

                                         

    </li>

    <li>

        <span>

            <a href="">流程</a>

        </span>

    </li>

    <li>

        <span >

            <a href="">联系方式</a>

        </span>

    </li>

</ul>

<style>

  span{background:#ccc;}

  span.hover{background:#f00;}

  span.active{background:#f0f;}

</style>

<script>

  $('span').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).mousedown(function(){$(this).addClass('active')},function(){$(this).removeClass('active')})

</script>

------解决思路----------------------
样式
a {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}
事件onmouseove，onmouseout，onClick