Question

晚上好！嗯，这里的问题是我试图在悬停li时尝试显示工具提示，但是如果它应该出现的位置高于或低于导航高度（li所在的位置），它消失了，但如果我在导航器的高度/宽度内移动工具提示，它看起来很完美。即使尺寸较大或偏离导航尺寸，我也需要显示工具提示。希望我已经清楚了！这是我的代码：

<html>
    <head>
        <title> Práctica 2 </title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
            <header></header>
            <nav>
                <ul>
                    <li>
                        <div class="dropdown"><a href="#">Primero</a>
                            <div class="dropdown-content">
                                <a href="#">1.1</a>
                                <a href="#">1.2</a>
                                <a href="#">1.3</a>
                            </div>  
                        </div>
                    </li>
                    <li><a href="#">Segundo</a></li>
                    <li><a href="#">Tercero</a></li>
                    <li><a href="#" class="tooltip">Cuarto <span class="tooltiptext">Tooltip text</span></a></li>
                <ul>
            </nav>

            <main>
                Línea de texto. </br>
                Línea de texto. </br>
                Línea de texto. </br>
            </main>
    </body>
</html>

CSS：

 * {                    margin: 0%;
                        padding: 0%;}

    header {                margin: auto; 
                        height: 300px;
                        width: 800px;
                        background-color: gray;}

    nav {                   margin: auto; 
                        width: 800px;
                        height: 50px;
                        position: sticky;
                        position: -webkit-sticky;
                        top: 0; } 

    nav ul {                list-style-type: none;
                        margin: auto;
                            padding: 0;
                            overflow: hidden;
                            background-color: #333;
                        width: 800px; }

    nav ul li {             float: left;
                        width: 25%; 
                        b: 50px 0px 50px 0px;}
    nav ul li:hover {           background-color: red; }

    nav ul li a {               display: block;
                            color: white;
                            text-align: center;
                            padding: 14px 16px;
                            text-decoration: none;}

    .dropdown-content {         display: none;
                            position: absolute;
                            background-color: #333;
                            min-width: 25%;
                            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                            z-index: 1;
                        border-radius: 0px 0px 5px 5px;}
    .dropdown-content a:hover {     background-color: gray; }
    .dropdown-content a:last-child {    border-radius: 0px 0px 5px 5px; }

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

    main {                  width: 800px;
                        margin: 10px auto; }

    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

我认为问题在于导航，但我不确定，因为正如我所说，如果工具提示的位置在导航器的大小内，则会出现。

非常感谢！

如果位于导航高度/宽度之外，则工具提示不会显示

0 个答案: