设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 有没有什么办法可以改变显示的内容？
返回列表 发新帖
查看: 3012|回复: 16

[已解决]有没有什么办法可以改变显示的内容？

[复制链接]
weiter
发表于 2020-3-28 21:37:47 | 显示全部楼层 |阅读模式
5鱼币
我想写一个可以在鼠标悬停在它上面的时候会改变原有内容的div，有办法实现吗？
最佳答案
月排行榜 / 总排行榜
liuzhengyuan
2020-3-28 21:37:48
本帖最后由 liuzhengyuan 于 2020-3-28 22:05 编辑
weiter 发表于 2020-3-28 22:01
我是想在鼠标移过去的时候显示影藏的内容同时影藏原来显示的内容，但是我不会弄。。。【我有点尬】
这 ...


那好办
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .hide:hover {
  9.             color: black;
  10.         }

  12.         .see {
  13.             color: black;
  14.         }

  16.         .hide {
  17.             color: white;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <span class="hide"><span class="see">aaa</span>ddd</span>
  23. </body>
  24. </html>
复制代码

最佳答案

liuzhengyuan

查看完整内容

那好办

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-28 21:37:48 | 显示全部楼层    本楼为最佳答案   
本帖最后由 liuzhengyuan 于 2020-3-28 22:05 编辑
weiter 发表于 2020-3-28 22:01
我是想在鼠标移过去的时候显示影藏的内容同时影藏原来显示的内容，但是我不会弄。。。【我有点尬】
这 ...


那好办
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .hide:hover {
  9.             color: black;
  10.         }

  12.         .see {
  13.             color: black;
  14.         }

  16.         .hide {
  17.             color: white;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <span class="hide"><span class="see">aaa</span>ddd</span>
  23. </body>
  24. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 21:38:19 | 显示全部楼层
求助啊！！！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-28 21:52:41 | 显示全部楼层
本帖最后由 liuzhengyuan 于 2020-3-28 21:56 编辑

这样？
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .see:hover {
  9.             color: white;
  10.         }
  11.         .hide:hover {
  12.             color: black;
  13.         }

  15.         .hide {
  16.             color: white;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <p class="see"><span class="hide">dddd</span>aaa</p>
  22. </body>
  23. </html>
复制代码


比较勉强，就是用两个元素，鼠标放上去，一个变白，一个变黑
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 21:58:41 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 21:52
这样？

我先试一下
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:01:28 | 显示全部楼层
本帖最后由 weiter 于 2020-3-28 22:04 编辑
liuzhengyuan 发表于 2020-3-28 21:52
这样？


我是想在鼠标移过去的时候显示影藏的内容同时影藏原来显示的内容，但是我不会弄。。。【我有点尬】
这个是用一个框覆盖掉原有内容，能在这个框上面写字吗？
你这个鼠标放上去之后并没有把内容变成  dddd，而是直接不见了。。。（被白色覆盖了）
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-28 22:05:37 | 显示全部楼层
weiter 发表于 2020-3-28 22:01
我是想在鼠标移过去的时候显示影藏的内容同时影藏原来显示的内容，但是我不会弄。。。【我有点尬】
这 ...


刚刚又改了一下，你看看
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .hide:hover {
  9.             color: black;
  10.         }

  12.         .see {
  13.             color: black;
  14.         }

  16.         .hide {
  17.             color: white;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <span class="hide"><span class="see">aaa</span>ddd</span>
  23. </body>
  24. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:06:23 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 21:37
那好办

我懂了，虽然和我想搞得有点区别，但是大概原理知道了，谢谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:08:57 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 22:05
刚刚又改了一下，你看看

但我比较疑惑，能不能让隐藏的内容显示在原来可以看到的内容上？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:12:25 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 22:05
刚刚又改了一下，你看看

我觉得我那个想法好像比较接近小甲鱼讲“给网页注入灵魂”的时候讲的补丁有点像（JavaScript！？）。我先去修炼一下
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-28 22:24:57 | 显示全部楼层
weiter 发表于 2020-3-28 22:08
但我比较疑惑，能不能让隐藏的内容显示在原来可以看到的内容上？


还是比较勉强，我走了，明天见

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .hide:hover {
  9.             color: black;
  10.         }

  12.         .hide {
  13.             color: rgba(0, 0, 0, 0); /*透明*/
  14.         }

  16.         .see {
  17.             color: black;
  18.         }
  19.         
  20.         .see:hover {
  21.             position:absolute; /*此处*/
  22.             color: rgba(0, 0, 0, 0); /*透明*/
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <span class="hide"><span class="see">aaa</span>ddd</span>
  28. </body>
  29. </html>
复制代码

评分

参与人数 1鱼币 +1 收起 理由
weiter + 1 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:30:27 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 22:24
还是比较勉强，我走了，明天见

谢谢，明天见
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-28 22:39:19 | 显示全部楼层
weiter 发表于 2020-3-28 22:30
谢谢，明天见

这是完美版（不在勉强），绝对的按照要求（我走了）

小特效，代码好长~
不知道有没有更简便的方法呢~

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .hide:hover {
  9.             color: black;
  10.             position:absolute;
  11.         }

  13.         .hide {
  14.             color: rgba(0, 0, 0, 0); /*透明*/
  15.         }

  17.         .see {
  18.             color: black;
  19.         }
  20.         
  21.         .see:hover {
  22.             position:absolute;
  23.             color: rgba(0, 0, 0, 0); /*透明*/
  24.         }

  26.         :hover.still { /*这个为了避免鼠标在旁边悬停的bug*/
  27.             color: rgba(0, 0, 0, 0);
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <span class="hide"><span class="see">aaa</span><span class="still">ddd</span></span>
  33. </body>
  34. </html>
复制代码

评分

参与人数 1荣誉 +1 鱼币 +1 收起 理由
weiter + 1 + 1 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-28 22:40:31 | 显示全部楼层
liuzhengyuan 发表于 2020-3-28 22:39
这是完美版（不在勉强），绝对的按照要求（我走了）

小特效，代码好长~

感谢大佬指导！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-29 08:10:00 | 显示全部楼层
本帖最后由 liuzhengyuan 于 2020-3-29 09:45 编辑
weiter 发表于 2020-3-28 22:40
感谢大佬指导！


主要在于
position: absolute;

评分

参与人数 1鱼币 +1 收起 理由
weiter + 1 无条件支持楼主！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

liuzhengyuan
发表于 2020-3-30 13:04:41 | 显示全部楼层
weiter 发表于 2020-3-28 22:40
感谢大佬指导！

又灵机一动想到好方法，此方法及其简洁
上过小甲鱼课的应该理解
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .no::before {
  9.             content: "aaa";
  10.         }

  12.         .no:hover::before {
  13.             content: "bbb";
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <p class="no"></p>
  19. </body>
  20. </html>
复制代码

评分

参与人数 1鱼币 +3 收起 理由
tzs12138 + 3

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

weiter
 楼主| 发表于 2020-3-30 14:03:14 | 显示全部楼层
本帖最后由 weiter 于 2020-3-30 14:06 编辑
liuzhengyuan 发表于 2020-3-30 13:04
又灵机一动想到好方法，此方法及其简洁
上过小甲鱼课的应该理解


我忽然觉得这个问题的最佳答案选的太早了
大佬的答案真的一次比一次好啊！
我懂了！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 12:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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