jquery鼠标经过字体发生变化-图片发生变化//为注释内容

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

buzhang1314

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

阅读量901

点赞数 1

分类专栏： jquery基础文章标签： jquery jquery属性

本文链接：https://blog.csdn.net/buzhang1314/article/details/39803735

版权

jquery基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>部长练习jquery的属性</title>
<script src="js/jquery-1.11.1.min.js"></script>


<style>
.bor{border:10px solid yellow;}
.red{color:red;}
</style>
<script>
$(document).ready(function(e) {
    
    //增加属性居中
    //$('div').attr('align','center');
    
    //设定多个属性
    $('div').attr({'align':'center','id':'myaa','title':'aaaaaaaaa'});
    
    //$('div').css('text-align','right');
    
    //读取align属性值，并提示框显示出来
    //alert($('div').attr('align'));
	
	//鼠标经过更换图片
    $('img:first').hover(function(){
        $(this).attr('src','b.jpg');
		
		//鼠标经过增加样式
        $(this).addClass('bor');
		
	//鼠标离开还换为原来的图片
    },function(){
        $(this).attr('src','33.jpg');
        
		//鼠标离开减去样式
		$(this).removeClass('bor');
    });
    
	//鼠标经过字体变颜色
    $('h1:first').hover(function(){
        $('h1:first').toggleClass('red');
    },function(){
        $('h1:first').toggleClass('red');
    });
    
});
</script>
</head>

<body>
<h1>鼠标经过换图片</h1>
<div>ok</div>
<img src='33.jpg' width="300" height="200">
<hr>
<img src='33.jpg' width="300">
<img src='b.jpg' width="300" height="200">

</body>
</html>

buzhang1314

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery鼠标经过字体发生变化-图片发生变化//为注释内容

部长练习jquery的属性.bor{border:10px solid yellow;}.red{color:red;}$(document).ready(function(e) { //增加属性居中 //$('div').attr('align','center'); //设定多个属性 $('div').attr({'alig
复制链接

扫一扫

专栏目录