不用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 阅读 334 次 更新于 2025-09-09 21:28:12 我来答关注问题0
  •  翡希信息咨询 html、css 和 js 的关系

    HTML、CSS 和 JS 是 web 开发的基础和核心,它们分别代表了网页的结构、表现和行为。这三者相互协作,共同构建出丰富多彩的网页应用。一、HTML(结构)HTML(HyperText Markup Language,超文本标记语言)是网页的骨架,它定义了网页的基本结构和内容。如果把网站比作游戏英雄的话,HTML 就是英雄的身体。HT...

  •  翡希信息咨询 自学完html、css和js之后应该学什么?及自学书籍推荐

    jQuery官网:https://jquery.com/ 书籍推荐:《jQuery基础教程》、《锋利的jQuery》、《jQuery实战》。这些书籍详细介绍了jQuery的选择器、事件处理、动画、AJAX应用等内容,适合不同层次的读者。小程序开发 随着移动互联网的普及,小程序成为了一种重要的前端技术。学习小程序开发可以让你掌握如何在微信、支...

  •  秋天的程序员 JS或者jquery做 一个div不随滚动条上下移动改变位置的效果,就是div始终保持在浏览器的一个位置,不用css

    不用CSS是行不通的,js或jquery做出的效果,也是使用了css中的相关属性。只不过,使用js或jquery后可以增加更多效果

  •  萌伊242 用纯js就可以写一个网页!为什么还要用html和css,为什么不把html及css舍去??有这发展

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

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

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

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

CSS相关话题

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