Question

我有一个词汇单词的网页，将鼠标悬停在单词上会触发带定义的弹出窗口。我用＆＃34;下拉＆＃34;完成了这个。和＆＃34;下拉＆＃34;内容Divs。但是由于某些原因，Divs内部的内容（在这种情况下是词汇本身）在移动设备中完全消失，尽管无序列表项目符号没有。这是一个纯粹的html / css设置，所以我不确定问题是什么。我已经在多个浏览器和手机上测试了它，问题显然是在移动设备上显示，无论是iOS还是Android。

以下是其中一个词汇词的HTML样式：

<ul><li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;"><div class="dropdown"><strong><span style="font-size: 16px; color:white;">Character</span></strong><div class="dropdown-content"><span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
consistently applied and expressed by his behavior and actions.</span></div>

以下是样式表中的下拉代码：

.dropdown {
position: absolute;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 300%;
min-width:350px;
max-width:850px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

注意我正在使用第三方在线课程平台，以获得它的价值。可能存在一些可能导致问题的样式规则，但希望无论引起什么，这对于更多经验丰富的开发人员来说都是显而易见的。

Answer 1

            .dropdown {
                position: absolute;
                display:block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                width: 300%;
                min-width:350px;
                max-width:850px;
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                padding: 12px 16px;
                z-index: 1;
            }

            .dropdown:hover .dropdown-content {
                display: block;
            }
        </style>

        <ul>
            <li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;">
            </li>
        </ul>
        <div class="dropdown">
            <strong>
                <span style="font-size: 16px; color:black;">Character
                </span>
            </strong>

            <div class="dropdown-content">
                <span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
                consistently applied and expressed by his behavior and actions.
               </span>
           </div>
       </div>

嗨我试过你的html和它的工作希望这有助于谢谢

弹出式文字Div在手机上消失

1 个答案: