1、可以使用css直接进行相关的css变换
2、使用js进行css变换
比如，鼠标经过时css样式与鼠标移开css样式
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Robert.Leng">
<title>不刷新 css变换实例</title>
<style>
.test{
border:1px solid #ccc;
color:red;
}
.test:hover{
color:yellow;
border:1px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="test">
<p>这只是一个测试</p>
<span>2017-10-31</span>
</div>
</body>
</html>
js举例：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Robert.Leng">
<title>不刷新 css变换实例</title>
<style>
.test{
border:1px solid #ccc;
color:red;
}
.test.current{
color:yellow;
border:1px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="test">
<p>这只是一个测试</p>
<span>2017-10-31</span>
</div>
<spcript src="/jquery.mini.js"> //引入jquery库
<script>
$(document).ready(function(){
$('.test').mouseover(function()
{
$(this).addClass("current");
}).mouseout(function()
{
$(this).removeClass("current");
});
})
</script>
</body>
</html>
当然上面的css可以直接在js中写，这里只是为了方便没有这样做，具体的js添加css属性可参考jquery库
温馨提示：内容为网友见解，仅供参考
第1个回答 2017-10-30
通过js改变class
相似回答
