Question

我有一个我正在制作的网站，而且我的导航栏中有一个似乎正在泄漏的div。如果我将鼠标悬停在除了页眉和页脚之外的任何地方，就像我将鼠标悬停在链接上一样。似乎无法看到问题所在。它似乎来自我的登录按钮，因为当鼠标悬停在内容上时显示的是href，但我已经查看了我的代码，并且可以“看到一个未封闭的div。我真的很感激这个帮助，它会破坏我的头脑。

我的Fiddle图像是占位符代替我的图像，但大小相同。

<body>
<div class="page-wrap">

<header class="topbar topbar-grey">
    <div class="topbar-left">
        <div class="topbar-logo">
            <a href="/">
                <img class="mysite-logo" src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg" alt="Mysite Logo" />


            </a>

        </div>
    </div>
    <nav class="topbar-nav">
        <ul class="topbar-nav-main">
            <li id="home-nav"><a href="index.html">Home</a></li>
            <li id="about-nav"><a href="about.html">About</a></li>
            <li id="contact-nav"><a href="contact.html">Contact</a></li>
            <li id="gallery-nav"><a href="gallery.html">Gallery</a></li>
            <li id="comissions-nav"><a href="comissions.html">Comissions</a></li>
        </ul>
   <div class="topbar-right">
   <div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
    <div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
    <div class="hamburger2"><a href="login.html">Login</div>
    </div>
    </nav>

   </header>

    <div class="contentstuff">

     <div class="col col1">
    <div class="box1">
    <div id="box-image">

                    </div>
    </div>
    <div class="box3">
    <div id="box-image2">

                    </div>
         </div>
   </div>

   <div class="col col2">
   <div class="box2">

    <div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>
    <input type="radio" id="button-2" name="controls"/>
    <label for="button-2"></label>
    <input type="radio" id="button-3" name="controls"/>
    <label for="button-3"></label>
    <input type="radio" id="button-4" name="controls"/>
    <label for="button-4"></label>
    <input type="radio" id="button-5" name="controls"/>
    <label for="button-5"></label>
    <input type="radio" id="button-6" name="controls"/>
    <label for="button-6"></label>
    <input type="radio" id="button-7" name="controls"/>
    <label for="button-7"></label>
    <input type="radio" id="button-8" name="controls"/>
    <label for="button-8"></label>
    <input type="radio" id="button-9" name="controls"/>
    <label for="button-9"></label>
    <input type="radio" id="button-10" name="controls"/>
    <label for="button-10"></label>

    <div id="slideshow-inner">
        <ul>
            <li id="slide1">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide2">

            </li>
            <li id="slide3">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide4">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide5">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide6">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide7">

            </li>
            <li id="slide8">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide9">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

            </li>
            <li id="slide10">
                <img src="http://lorempixel.com/output/animals-q-c-550-550-10.jpg" />

              </li>
          </ul>
       </div>
   </div>


   </div>
   <div class="box4">
   <div id="box-image3">

                    </div>
   </div>
  </div>


</div>

<footer class="site-footer">


<div class="row-1">
   <div class="logofooter">
                   <a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/cats-q-c-128-128-6.jpg"></a>
                   <div class="brand">
                       <a href="index.html"> MySiteLogo</a>
                   </div>
          </div>
                 <ul class="legal">
                     <li><a href="privacy.html">Privacy Policy</a></li>
                     <li><a href="legal.html">Legal</a></li>
                     <li><a href="disclaimer.html">Disclaimer</a></li>
                     <li><a href="contact.html">Contact</a></li>
                </ul>

            <div class="social">    

                <ul class="socicons">
                    <li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"></a></li>
                    <li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
                    <li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-64-64-10.jpg"> </a></li>
                </ul>
            </div>
       </div>
            </div>

</footer>
</body>

</html>

Answer 1

您忘记关闭<a>代码：

<div class="hamburger2"><a href="login.html">Login</div>

Answer 2

它不是</div>您缺少登录链接的结束</a>标记。

 <div class="topbar-right">
   <div class="hamburger"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
    <div class="hamburger3"><img src="http://lorempixel.com/output/food-q-c-48-48-1.jpg"></div>
    <div class="hamburger2"><a href="login.html">Login</div>
    </div>

div关闭的问题，它的href正在溢出其他内容

2 个答案: