Question

我一直在使用code found on this site创建一系列文本悬停框，这些框一直运行良好，直到我将它们用于表格中的文本。看起来当悬停框弹出AREA时会弹出另一个框（虽然现在不存在），背景变得透明，使得阅读文本悬停框非常困难。

如果您查看此代码，结果中的上部笑脸会有一个悬停框，您可以看到其他屏幕文本。这是我的问题。我根据其他一些在线搜索玩了z-index和opacity设置，但到目前为止没有任何工作。

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

<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>

＆＃13;

如需更多帮助，请使用 link

Answer 2

你的代码非常糟糕。 LOL

你只需要在正确的位置添加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>

文本悬停框变为透明

2 个答案: