Html 使用“content”属性在不同的div上获得移动悬停效果

我想做的是当你把鼠标悬停在div1上时，它会影响div的链接

悬停在div1上时：

div .div1:hover ~ linksdiv:after    {
display:inline-block;
transition-duration: all 1s;
color:#FFF;
padding-left:50px;
content:"index";

不带悬停的linksdiv：

display:inline-block;
position:relative;
transition-duration:1s;
transition-property:margin;
transition-delay:2s;
float:left;
margin-left:100px;
width:500px;
height:100px;
font-size:100px;
font-weight:900;
top:-230px;
content: string;

此代码的目的是使文本在红色背景上变为白色，同时提供移动效果。 但它所做的只是显示一个白色文本

当我没有使用内容，而是在div中有一个完成的书面文本时，这就起作用了：

编辑： html

---

你真的应该显示你的html。@AlphaKitten你想为iframe的内容设置样式吗？@ROX不，我想为.linksdiv设置移动效果的样式。linksdiv有一个content属性，当我将鼠标悬停在另一个div上时，它会显示文本。请在不悬停的情况下显示linksdiv的css类名：like？？？{…}并尝试以下操作-

        <div id="surrounding">
        <div id="left">
            <div class="div1">
                <a href="index.html">index</a>
            </div>
            <div class="div2">
                <a href="media.html">media</a>
            </div>
            <div class="linksdiv">

            </div>
        </div>
        <div id="header">
        </div>
        <iframe id="content" src="">
        </iframe>
    </div>