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

[耕坏的牛]

 
    <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>背景和字体颜色会变。离开时也会变。点击元素之后背景和字体颜色改变，离开之后不再触发鼠标离开时事件。以后我鼠标移在另外元素上，该元素背景和字体颜色也会变，而前次点击过的元素背景和颜色不变。点击另外元素则前次点击过的元素背景和颜色改变，本次点击的元素背景和颜色也改变

[slwsss]

样式定在a标签上 a {color:blue;} a:hover {color:red;} a:active {color:yellow;}

[耕坏的牛]

引用 1 楼 slwsss 的回复:

样式定在a标签上 a {color:blue;} a:hover {color:red;} a:active {color:yellow;}

首先谢谢你的回答~ 但是我的想法是结合 JS和CSS 通过onClick，onmouseout，onmouseove事件来处理。希望能帮助到我~ 谢谢~

[slwsss]

<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