CSS实现鼠标放在上面时整行变色效果_css内联样式hover效果 - CSDN文库

61 浏览量更新于2023-05-06 收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

CSS 实现鼠标放在上面时整行变色效果实现鼠标放在上面时整行变色效果

摘要摘要:

下文讲述css中实现鼠标放在指定行上面时，整行变色的方法分享，如下所示:

实现思路实现思路:

使用:hover伪类，实现当鼠标指向时，其背景色发生相应的变化，如下例所示:

例：

下文中的div，当鼠标放上时，背景色发生相应的变化。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.maomao365.com/" />

<title>猫猫教程(www.maomao365.com)</title>

<style type="text/css">

div{

overflow:hidden;

white-space:nowrap;

height:30px;

width:250px;

background-color:white;

color:black;

}

.divTest:hover{

background-color:blue;

color:white;

}

</style>

</head>

<body>

<div class="divTest">div 鼠标移上时,背景色发生变化</div>

</body>

</html>

总结总结

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38626179

粉丝: 4
资源: 960

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈