文本悬停框变为透明

Question

我一直在使用code found on this site 创建一系列文本悬停框，在我将它们用于表格中的文本之前，它们一直运行良好。似乎当悬停框在区域上弹出时，另一个框会弹出（虽然现在不存在），背景变得透明，使得文本悬停框很难阅读。

如果您查看此代码，结果中上方的笑脸有一个悬停框，您可以通过该悬停框查看其他屏幕上的文本。这是我的问题。我根据其他一些在线搜索尝试了 z-index 和不透明度设置，但到目前为止没有任何效果。

<style>
    .m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
    .m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#ffffff;min-width:300px}
</style>

<div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;"> 
    <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;          
         width: 40px;"/>
    <span><strong><u>second hover box</u></strong>
</div>

<style>
    .m span{display: none;list-style: none} .m {z-index:5000;position:absolute;display:inline-block}
    .m:hover span{z-index:5001;display:block;position:relative;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#999999;min-width:300px;}
</style>

<div class="m" style="text-align: left;">ON SCREEN TEXT<br/><br/> and some more
    <span> first hover<br/><br/>more hover box</span>
</div>
<br/>
<style>
    .m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
    .m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#ffffff;min-width:300px}
</style>
<div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;"> 
    <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;          
         width: 40px;"/>
    <span><strong><u>second hover box</u></strong>
</div>

Answer 1

你可以这样使用。它会帮助你

<style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#000000;min-width:300px;opacity: 0.4; }
</style>
            <div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;"> 
               <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;          
                width: 40px;"/>
                        <span><strong><u>second hover box</u></strong>
            </div>
<style>
.m span{display: none;list-style: none} .m {z-index:5000;position:absolute;display:inline-block}
.m:hover span{z-index:5001;display:block;position:relative;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#999999;min-width:300px;}
</style>
         <div class="m" style="text-align: left;">ON SCREEN TEXT<br/><br/> and some more
                <span> first hover<br/><br/>more hover box</span></div>
<br/>
<style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#ffffff;min-width:300px}
</style>
            <div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;"> 
               <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;          
                width: 40px;"/>
                        <span><strong><u>second hover box</u></strong>
            </div>

如需更多帮助，请使用此link

Answer 2

你的代码太糟糕了。哈哈

您只需要在正确的位置添加 z-index。这在你的 div 中。

你的代码应该是这样的：

 <style>
    .m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
    .m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #0195c8;background-color:#0195c8;color:#ffffff;min-width:300px}
    </style>
    <div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;z-index:25;"> 
        <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;width: 40px;"/>
        <span>
            <strong>
                <u>second hover box</u>
            </strong>
        </span>
    </div>

    <div class="m" style="text-align: left;">
        ON SCREEN TEXT<br/><br/>and some more
        <span> first hover<br/><br/>more hover box</span>
    </div>
    <br/>


    <div class="m" style="font-family: &#39;trebuchet ms&#39;, helvetica;"> 
        <img src=http://2.bp.blogspot.com/-QEUhPNc1xag/UHnAq0rQQNI/AAAAAAAAAdI/JgtSqZHDIBY/s1600/smiley%2Bface%2Bwinking.jpg style="margin: 0px;width: 40px;"/>
        <span>
            <strong>
                <u>second hover box</u>
            </strong>
        </span>
</div>