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

weiter · 发表于 2020-3-28 21:37:47

我想写一个可以在鼠标悬停在它上面的时候会改变原有内容的div，有办法实现吗？

最佳答案

月排行榜 / 总排行榜

liuzhengyuan

2020-3-28 21:37:48

本帖最后由 liuzhengyuan 于 2020-3-28 22:05 编辑

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

那好办

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

        .see {
            color: black;
        }

        .hide {
            color: white;
        }
    </style>
</head>
<body>
    <span class="hide"><span class="see">aaa</span>ddd</span>
</body>
</html>

跳转到最佳答案楼层

liuzhengyuan · 发表于 2020-3-28 21:37:48

这个最佳答案由 liuzhengyuan 给出，感谢 liuzhengyuan 的回答。

单击隐藏图章

本帖最后由 liuzhengyuan 于 2020-3-28 22:05 编辑

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

那好办

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

        .see {
            color: black;
        }

        .hide {
            color: white;
        }
    </style>
</head>
<body>
    <span class="hide"><span class="see">aaa</span>ddd</span>
</body>
</html>

weiter · 发表于 2020-3-28 21:38:19

求助啊！！！

liuzhengyuan · 发表于 2020-3-28 21:52:41

本帖最后由 liuzhengyuan 于 2020-3-28 21:56 编辑

这样？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .see:hover {
            color: white;
        }
        .hide:hover {
            color: black;
        }

        .hide {
            color: white;
        }
    </style>
</head>
<body>
    <p class="see"><span class="hide">dddd</span>aaa</p>
</body>
</html>

比较勉强，就是用两个元素，鼠标放上去，一个变白，一个变黑

weiter · 发表于 2020-3-28 21:58:41

liuzhengyuan 发表于 2020-3-28 21:52
这样？

我先试一下

weiter · 发表于 2020-3-28 22:01:28

本帖最后由 weiter 于 2020-3-28 22:04 编辑

liuzhengyuan 发表于 2020-3-28 21:52
这样？

我是想在鼠标移过去的时候显示影藏的内容同时影藏原来显示的内容，但是我不会弄。。。【我有点尬】
这个是用一个框覆盖掉原有内容，能在这个框上面写字吗？
你这个鼠标放上去之后并没有把内容变成 dddd，而是直接不见了。。。（被白色覆盖了）

liuzhengyuan · 发表于 2020-3-28 22:05:37

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

刚刚又改了一下，你看看

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

        .see {
            color: black;
        }

        .hide {
            color: white;
        }
    </style>
</head>
<body>
    <span class="hide"><span class="see">aaa</span>ddd</span>
</body>
</html>

weiter · 发表于 2020-3-28 22:06:23

liuzhengyuan 发表于 2020-3-28 21:37
那好办

我懂了，虽然和我想搞得有点区别，但是大概原理知道了，谢谢

weiter · 发表于 2020-3-28 22:08:57

liuzhengyuan 发表于 2020-3-28 22:05
刚刚又改了一下，你看看

但我比较疑惑，能不能让隐藏的内容显示在原来可以看到的内容上？

weiter · 发表于 2020-3-28 22:12:25

liuzhengyuan 发表于 2020-3-28 22:05
刚刚又改了一下，你看看

我觉得我那个想法好像比较接近小甲鱼讲“给网页注入灵魂”的时候讲的补丁有点像（JavaScript！？）。我先去修炼一下

liuzhengyuan · 发表于 2020-3-28 22:24:57

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

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

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

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

        .see {
            color: black;
        }
        
        .see:hover {
            position:absolute; /*此处*/
            color: rgba(0, 0, 0, 0); /*透明*/
        }
    </style>
</head>
<body>
    <span class="hide"><span class="see">aaa</span>ddd</span>
</body>
</html>

weiter · 发表于 2020-3-28 22:30:27

liuzhengyuan 发表于 2020-3-28 22:24
还是比较勉强，我走了，明天见

谢谢，明天见

liuzhengyuan · 发表于 2020-3-28 22:39:19

weiter 发表于 2020-3-28 22:30
谢谢，明天见

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide:hover {
            color: black;
            position:absolute;
        }

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

        .see {
            color: black;
        }
        
        .see:hover {
            position:absolute;
            color: rgba(0, 0, 0, 0); /*透明*/
        }

        :hover.still { /*这个为了避免鼠标在旁边悬停的bug*/
            color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>
    <span class="hide"><span class="see">aaa</span><span class="still">ddd</span></span>
</body>
</html>

weiter · 发表于 2020-3-28 22:40:31

liuzhengyuan 发表于 2020-3-28 22:39
这是完美版（不在勉强），绝对的按照要求（我走了）

小特效，代码好长~

感谢大佬指导！

liuzhengyuan · 发表于 2020-3-29 08:10:00

本帖最后由 liuzhengyuan 于 2020-3-29 09:45 编辑

weiter 发表于 2020-3-28 22:40
感谢大佬指导！

主要在于
position: absolute;

liuzhengyuan · 发表于 2020-3-30 13:04:41

weiter 发表于 2020-3-28 22:40
感谢大佬指导！

又灵机一动想到好方法，此方法及其简洁
上过小甲鱼课的应该理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .no::before {
            content: "aaa";
        }

        .no:hover::before {
            content: "bbb";
        }
    </style>
</head>
<body>
    <p class="no"></p>
</body>
</html>

weiter · 发表于 2020-3-30 14:03:14

本帖最后由 weiter 于 2020-3-30 14:06 编辑

liuzhengyuan 发表于 2020-3-30 13:04
又灵机一动想到好方法，此方法及其简洁
上过小甲鱼课的应该理解

我忽然觉得这个问题的最佳答案选的太早了

大佬的答案真的一次比一次好啊！
我懂了！

账号		自动登录	找回密码
密码			立即注册

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

最佳答案

本帖被以下淘专辑推荐:

评分

评分

评分

评分