查看: 583|回复: 15

[活动] 【凡哥教程第二十五讲作业之二】移入移出变色(JS操作CSS属性和HTML属性)

[复制链接]
发表于 2024-8-25 17:34 | 显示全部楼层 |阅读模式
作业二:有一个元素,部分代码如下所示,它已经拥有CSS样式,但我们还希望在交互时它能动态地产生一些变化,具体是,设备指针(pointer)移入元素界面时前景色是红色、背景色是浅绿色,移出时前景色是黑色、背景色是浅蓝色。同样使用上述代码结构,请通过纯CSS方式实现作业一JS能实现的功能。提示:本作业不使用JS,仅需给 CSS 加一个伪类选择器。
移入 背景绿 前景红
移出 背景蓝 前景黑

评分

3

查看全部评分

凡哥 2024-8-25 18:28
回复
100√
回复

使用道具

 楼主| 发表于 2024-8-25 17:34 | 显示全部楼层
<style> #qsfg256 { width: 600px; height: 200px; font-size: 2rem; text-shadow: 1px 1px 2px gray; background: lightblue; border: 2px solid gray; padding: 10px; } #qsfg256:hover { background: LightGreen;color: red; font-size: 3rem;} </style> <div id="qsfg256">移入 背景绿 前景红<br>移出 背景蓝 前景黑</div>  

评分

2

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-25 17:37 | 显示全部楼层
@凡哥
作业二原来比作业一更简单,
仔细看了作业要求,老师有提醒用伪类选择器。

这样的理解不知道对不对。

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-8-25 18:28 | 显示全部楼层
花简静 发表于 2024-8-25 17:37
@凡哥
作业二原来比作业一更简单,
仔细看了作业要求,老师有提醒用伪类选择器。

就是用元素的 :hover 伪类选择器,它其实是一个指针设备滑过事件。作业完全正确。
点评
回复

使用道具

 楼主| 发表于 2024-8-25 20:15 | 显示全部楼层
凡哥 发表于 2024-8-25 18:28
就是用元素的 :hover 伪类选择器,它其实是一个指针设备滑过事件。作业完全正确。 ...

只记得鼠标划过有变化的就是色彩啊,大小呀之类的,用的就是:hover,
又翻了一下前面的教程,它就是伪类选择器
这 就对上了,哈哈。。
点评
回复

使用道具

发表于 2024-8-26 00:42 | 显示全部楼层
谢谢老师,谢谢静版,祝愉快
点评
回复

使用道具

发表于 2024-8-26 16:14 | 显示全部楼层
欣赏简静精彩作业~~
点评
回复

使用道具

发表于 2024-8-26 16:14 | 显示全部楼层
问好简静,感谢你的精彩作业~~
点评
回复

使用道具

发表于 2024-8-26 16:14 | 显示全部楼层
祝简静学习愉快,新周快乐~~
点评
回复

使用道具

发表于 2024-8-26 16:23 | 显示全部楼层
先占位置,回家看看再完成作业。
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-13 00:03

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表