Question

请查看代码（HTML和CSS），请告诉我如何将鼠标悬停在一个菜单项上，并在底部显示相应的div。让我知道我的代码有什么问题!!!

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>Trying to show a div while hover over menu items</title>

        <style type="text/css">
        .menu_div {
        width: 300px;
        height: 50px;
        background-color:red;
        display: block;}

        .menu_div ul li {list-style: none; display:inline-block;}

        .show_div ul li {display: inline-block;}

        .show_div_one {
        width: 300px;
        height: 50px;
        background-color: orange;
        margin-top: 50px;
        display: none;
        }
        .show_div_two {
        width: 300px;
        height: 50px;
        background-color: orange;
        margin-top: 50px;
        display: none;
        }
        .menu_div ul li.menu_item_one:hover + .show_div ul li.show_div_one{display:block;}
        .menu_div ul li.menu_item_two:hover + .show_div ul li.show_div_two{display:block;}
        </style>
    </head>
    <body>
        <div class="menu_div">
        <ul>
            <li class="menu_item_one">
                <a href="">Home</a>
            </li>
            <li class="menu_item_two">
            <a href="">about</a>
            </li>
        </ul>
        </div>
        <div class="show_div">
            <ul>
                <li>
                    <div class="show_div_one">
                    </div>
                </li>
                <li>
                    <div class="show_div_two">
                    </div>
                </li>
            </ul>
        </div>


    </body>
</html>

Answer 1

你的CSS选择器，虽然它们似乎在逻辑上使用+邻接运算符，但实际上并非如此。

直接邻接选择器用于直接相继出现的DOM元素。在您的HTML中，为了覆盖您希望展示的元素，您必须首先遍历DOM＆＃39;向上＆＃39;到父menu_div元素，然后到其兄弟show_div，然后到正确的孩子。 CSS无法做到这一点。

More on this from MDN

（+）这被称为相邻选择器。它只会选择紧跟指定的前一个指定元素元件。

您需要更改下面的代码，要将要显示的元素紧跟在您希望悬停的元素后面，您可能还想通过设置position:absolute

Demo Fiddle

<div class="menu_div">
    <ul>
        <li class="menu_item_one"> <a href="">Home</a>

            <div class="show_div_one">show me!</div>
        </li>
        <li class="menu_item_two"> <a href="">about</a>

            <div class="show_div_two">show me!</div>
        </li>
    </ul>
</div>

CSS

  .menu_div {
      width: 300px;
      height: 50px;
      background-color:red;
      display: block;
  }
  .menu_div ul li {
      list-style: none;
      display:inline-block;
  }
  .show_div ul li {
      display: inline-block;
  }
  .show_div_one, .show_div_two {
      width: 300px;
      height: 50px;
      background-color: orange;
      margin-top: 50px;
      display: none;
      position:absolute; /* <--- keep the flow you anticipate */
  }
  .menu_div ul li.menu_item_one a:hover + .show_div_one {
      display:block;
  }
  .menu_div ul li.menu_item_two a:hover + .show_div_two {
      display:block;
  }

Answer 2

为什么不使用JQuery，因为这比单独依赖CSS要好得多。

示例：Fiddle

$( document ).ready( function() {
     $('.show_div_one').hide();

    $('.menu_item_one').hover(
    function(){  
        $('.show_div_one').show();
    },
    function(){  
        $('.show_div_one').hide();
    }                 
    );
});

未经测试，但这就是您希望根据悬停显示和消失的每个人的一般想法。

在将鼠标悬停在菜单项上时，尝试在底部显示div

2 个答案:

Demo Fiddle