不用css不用js之类的,就传统html代码如何做出鼠标悬停展开的效果?

点击展开 这里是展开后的内容 在这个例子中,`summary`元素定义了按钮,而`p`元素包含了展开后显示的内容。默认情况下,`p`元素是隐藏的,当鼠标悬停在`summary`上时,它会自动显示。虽然这种方法没有直接使用CSS和JavaScript,但它利用了HTML5的新特性来实...
不用css不用js之类的,就传统html代码如何做出鼠标悬停展开的效果?
这确实是一个挑战。鼠标悬停通常涉及事件触发,通过CSS样式来实现视觉变化。HTML本身确实有一些基本的标签,HTML5引入了一些新的特性,但这些并不直接支持鼠标悬停时的动态效果。

然而,通过巧妙地使用HTML结构和一些预设的样式,我们还是可以实现类似的效果。例如,你可以创建一个包含子元素的容器,初始状态下隐藏子元素,当鼠标悬停在父元素上时,通过HTML5的`details`和`summary`标签来实现展开和收缩的效果。

`details`标签表示一个可展开和收缩的内容块,而`summary`标签定义了该块的标题。初始状态下,`details`标签的内容是不可见的,当用户悬停在`summary`上时,内容会自动展开。

示例如下:

<details>
<summary>点击展开</summary>
<p>这里是展开后的内容</p>
</details>

在这个例子中,`summary`元素定义了按钮,而`p`元素包含了展开后显示的内容。默认情况下,`p`元素是隐藏的,当鼠标悬停在`summary`上时,它会自动显示。

虽然这种方法没有直接使用CSS和JavaScript,但它利用了HTML5的新特性来实现类似鼠标悬停展开的效果。这种方法虽然简单,但在某些场景下非常有效。2024-12-20
mengvlog 阅读 9 次 更新于 2025-07-20 06:19:16 我来答关注问题0
  •  萌伊242 用纯js就可以写一个网页!为什么还要用html和css,为什么不把html及css舍去??有这发展

    首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的。比如ExtJS、webOS的Enyo等。但是主流Web开发很少采用全JS的方案。原因大体有以下几点:1. 注重考虑那些无法运行JS的用户代理。用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本。当然你可以选择忽略这...

  •  阿暄生活 编辑js,html ,css那款软件好用

    编辑JavaScript(JS)、HTML和CSS,推荐使用的软件有Visual Studio Code(VSCode)、Sublime Text、WebStorm、HBuilder、Atom、Brackets和Dreamweaver等。以下是这些软件的详细介绍:Visual Studio Code(VSCode):简介:一款轻量级的代码编辑器,支持多种编程语言,包括JavaScript、HTML和CSS。特点:功能全面且免费...

  • anonymous 为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发

    不可以 web的主要组成是html+css。js只是辅助实现一些效果所以由此可以看出来,html+css才是主流,从另一方面来说。网站建好 之后要进行优化推广,各大搜索引擎是不认识js是什东西的,他们很排斥js。相比起来,他们很喜欢html。所以,在建设网站的时候要尽量少用或者是不用 js。专业将这三者的关系:1. ...

  •  huangyu1235813 怎么在不使用CSS的情况是实现在固定单元格了使字体上下滚动

    没办法,不用css或js的话,用框架可以做,但滚动条没这么好看,可惜你是店铺,框架也是不支持的。放弃这个效果吧,要不就交钱给淘宝让它支持css

  •  文暄生活科普 AniJS - 一款超简单的、超实用的 JavaScript 动画库?不用写 JS、只需一行命令即可实现动画。

    欢迎来到猿镇,我是镇长,lee。今天,与大家共享一款超简单的 UI 交互库 ——AniJS。AniJS 是一款无需编写任何 JavaScript 的动画库,只需一行命令即可实现动画。它允许用户使用 JavaScript 来控制 CSS 动画。AniJS 是一款直观和简洁的动画库,它拥有声明式语法和强大的动画效果库,能够让你的网页动起来...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部