jq鼠标经过变色

最新推荐文章于 2022-04-28 08:27:49 发布

xiaoxioxia

最新推荐文章于 2022-04-28 08:27:49 发布

阅读量1.2k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/u013223091/article/details/21532421

版权

这篇博客展示了如何使用jQuery实现鼠标悬停时列表项颜色变化的效果。通过`mouseover`和`mouseout`事件，当鼠标进入和离开`

`元素时，文字颜色分别变为红色和黑色。示例中还包括了对具有特定类名的元素进行样式修改，并提供了一个按钮示例。

摘要由CSDN通过智能技术生成

<html>
<head>
    <script src="Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
     //   $("li").bind("mouseover", function(){
       // $(this).css("color","red");
    //});bind可以该on
      $("li").mouseover(function () {
        $(this).css("color", "red");
    });
    $("li").mouseout(function () {
        $(this).css("color", "black");
    });
});
</script>


</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<h3>图书种类</h3>
<ul type="circle" >
	<li >计算机类</li>
	<li>教材类</li>
	<li>杂志类</li>
	<li class = "my_love">文学类</li>
</ul>

<ol >
	<li>篮球</li>
	<li>足球</li>
	<li>羽毛球</li>
	<li class = "my_love" title="sport">乒乓球</li>
</ol>

<button type="button">Click me</button>
</body>
</html>

xiaoxioxia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq鼠标经过变色

$(document).ready(function() { // $("li").bind("mouseover", function(){ // $(this).css("color","red"); //});bind可以该on $("li").mouseover(function () { $(this).css("color
复制链接

扫一扫