具有动态内容的可转换 div答案

【问题标题】：Transformable div with dynamic content具有动态内容的可转换 div
【发布时间】：2019-03-22 18:46:36
【问题描述】：

正如标题所示，我正在尝试使用动态内容编写可转换的 div。基本上我希望 div 的文本在鼠标悬停时改变。下面是我的代码，我没想到 ul 在鼠标悬停之前会在 div 中显示项目符号。

编辑为了澄清，我希望 div 有一个默认文本，即“word”，然后在悬停时更改为“Word to your mom”，然后当鼠标离开元素时，它会变回“Word”。

<!DOCTYPE html>
<html lang="en">
<style>
    .wrap{
        margin: 30px auto;
        max-width: 1000px;
        width: 90vw;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        font-family: sans-serif;
    }

    .blue{
        background-color: rgba(56, 207, 248, 0.5);
    }

    .scale{
        transform: scale(1, 1);
        transition: transform 0.5s ease;
    }

    .box{
        width: calc(20%);
        margin: 20px 20px;
        background: #ddd;
        cursor: pointer;
        color: #FFF;
        text-align: center;
        line-height: 130px;
    }

    .box:hover .scale{
        transform: scale(1.5, 1.5);
    }

</style>

<head>
    <title></title>
<meta charset="utf-8">
</head>

<body>

    <div class="wrap">
        <div class="box">
            <div class="blue scale">
                <ul id="content">
                    <li onmouseout="Default('word')"></li>
                    <li onmouseover="hover('Word to your mother')"></li>
                </ul>

            </div>
        </div> 
    </div>
</body>

<script>
        function hover(description) {
            console.log(description);
            document.getElementById('content').innerHTML = description;
        }

        function Default(description){
            console.log(description);
            document.getElementById('content').innerHTML = description;
        }

</script>
</html>

以下是我在尝试解决此问题时访问的资源。

https://www.sitepoint.com/community/t/text-change-on-div-hover/216212/2

https://codepen.io/vailjoy/pen/ZLLLYd

Change div content based on mouse hover on different divs

感谢您的帮助。

【问题讨论】：

那么你期望的结果是什么？悬停时会更改 div 中的文本。
我编辑了我的问题以更好地反映我在寻找什么。这种转变很大程度上是按照我想要的方式发生的，只是文本的动态变化并没有按照我的意愿发生。

标签： javascript html css transform dynamic-content

【解决方案1】：

如果我有以下情况

<div class="changethis" data-descr=" to your mother" > Word </div>

我的 CSS 是

    .changethis:hover:after {

    content: attr(data-descr)
}

所以在悬停之前它会显示“Word”，然后在悬停时它会显示“Word to your mom”，然后在将光标移开后它会变回“Word”

【讨论】：

【解决方案2】：

您当然可以在没有任何 JavaScript 的情况下完成此操作。如前所述，一种选择是使用 CSS 伪选择器和内容属性。

但是，这种方法使用了一些技巧，如果您的文档包含您想要的内容会更好。

.wrap {
  margin: 30px auto;
  max-width: 1000px;
  width: 90vw;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-family: sans-serif;
}

.blue {
  background-color: rgba(56, 207, 248, 0.5);
}

.scale {
  transform: scale(1, 1);
  transition: transform 0.5s ease;
}

.box {
  width: calc(20%);
  margin: 20px 20px;
  background: #ddd;
  cursor: pointer;
  color: #FFF;
  text-align: center;
  line-height: 130px;
}

.box:hover .scale {
  transform: scale(1.5, 1.5);
}

.scale span {
  display: none;
}

.box:hover .scale span {
  display: inline;
}

https://codepen.io/eheisler/pen/bmMwre

【讨论】：