jQuery中属性attr鼠标经过换图片且加边框与鼠标经过字体变颜色对比

最新推荐文章于 2023-04-21 11:18:24 发布

置顶

lnx0307

最新推荐文章于 2023-04-21 11:18:24 发布

阅读量1.1k

点赞数

分类专栏： jQuery特效文章标签： jquery 鼠标

本文链接：https://blog.csdn.net/lnx0307/article/details/39784739

版权

该博客演示了如何使用jQuery实现鼠标悬停时图片切换为指定图片并添加边框效果，同时使文字颜色变为红色。通过`hover()`函数和`toggleClass()`、`attr()`方法，实现了元素交互的视觉变化。

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

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>webrx-title</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
.bor{border:1px solid red;}
.red{color:red;}
</style>
<script>
$(document).ready(function(e) {

$('div').css('text-align','right'); //div样式：ok居右边

//读取align属性值，并提示框显示出来
//alert($('div').attr('align'));
$('img:first').hover(function(){ //鼠标经过链接新图片，图片加边框
$(this).attr('src','2.jpg');
$(this).addClass('bor');
},function(){
$(this).attr('src','1.jpg');
$(this).removeClass('bor');
});