Question

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

编辑为了澄清起见，我希望div具有默认文本，即“ word”，然后将鼠标悬停时更改为“ Word to your mother”，然后当鼠标离开该元素时，它将更改回“ 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

谢谢您的帮助。

Answer 1

如果我有以下内容

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

我的CSS是

    .changethis:hover:after {

    content: attr(data-descr)
}

因此，在悬停之前，它会显示为“单词”，然后在悬停时会显示为“给妈妈的单词”，然后将光标移开后，它会变回“单词”

Answer 2

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

但是，这种方法使用了一些技巧，如果您的文档包含所需的内容，那就更好了。

.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

具有动态内容的可变形div

2 个答案: