关于鼠标进入、离开、点击事件的问题_html/css_WEB-ITnose

     <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>

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

回复讨论(解决方案)

样式定在a标签上

a {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}

样式定在a标签上

a {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}

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

<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