Question

我试图建立一个像mashable网站一样的搜索面板 http://mashable.com/ 因此，当用户将鼠标悬停在搜索图标上时，搜索面板将会打开。最初我想用css纯方法构建这个类似的东西

<ul>
    <li> menu item 1</li>
    <li> menu item 2</li>
    <li> menu item 3</li>
    <li id="serach">
        search
      <ul>
        <li>
           <input type="text placeholder="search">
           <input type="submit" value="search">
        </li>
     </ul>

    </li>
</ul>

css部分

<style>
    li#serach ul{
     display:none;
   }
   li#serach:hover >ul{
   display:block;

  }
</style>

这里可以看到一个工作示例http://jsfiddle.net/mBTQX/ 问题是当用户在菜单内向左移动时，搜索栏正在消失（因为悬停效果仅在搜索li上完成）。我希望即使用户将鼠标悬停在菜单导航本身上，搜索面板也会保留，就像在http://mashable.com/中实现的那样

任何人都可以告诉我如何做到这一点，是否可以使用纯css或者需要额外的js代码

Answer 1

<强>已更新

使用一些jQuery：

http://jsfiddle.net/fZgS9/3/

<强> JS

$(function() {

    var nav = $('#nav');
    var search = nav.find('li.search');

    search.on('mouseover', function(event) {

        search.children().addClass('show');

    });

    nav.on('mouseleave', function(event) {

        search.children().removeClass('show');

    });

});

这是基本想法（没有js）：

http://jsfiddle.net/fZgS9/1/

<强> HTML

<ul id="nav">
    <li class="search">
        <div>
            <input type="text"/>
        </div>
    </li>
</ul>

<强> CSS

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 50px;
    height: 1em;
    background-color: #09A065;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

#nav > li.search {
    margin: 0;
    padding: 0;
    float: right;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    position: relative;
}

#nav > li.search > div {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ccc;
    display: none;
}

#nav > li.search:hover > div {
    display: block;
}

#nav > li.search:hover:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 2000em;
    height: 1em;
    background: red;
    content: "";
}

关键是使用位置相对/绝对并显示无/块，并且li：hover使用子选择器影响内部div。

我希望即使用户正在悬停，搜索面板也会保留在菜单导航本身...

整蛊，但是使用伪元素完成，你可以用不透明度隐藏它，但它会覆盖菜单的其余部分......哼......用JS ......

Answer 2

使用Javascript执行此操作可能更好。也就是说，用CSS寻找效果并非不可能。

如果问题是这样，当将鼠标悬停在非li#search但不是其他菜单项的部分菜单上时，下拉搜索框会消失，您可以通过制作{{1}来修复它} 更宽的。当然，如果您对所有li#search的悬停效果不想覆盖更广泛的区域，这可能会造成麻烦。他的新问题的解决方案是覆盖li的{{1}}样式，并将其应用于li:hover内的li#search：

所以你的 HTML 可能是这样的：

div

您的 CSS 可能是这样的：

li#search

您可以调整这些样式以匹配您自己的网站（我会这样做，但您发布的jsFiddle有太多的CSS来清除）。重要的是<li id="search"> <div>Search</div> <ul> <li> <input type="text placeholder="search"> <input type="submit" value="search"> </li> </ul> </li>的有效宽度（宽度+填充）与li:hover, li#search:hover div {background-color:blue;} li#search {width:50px;padding-left:50px;} li#search:hover {background-color:none;} li#search div {width:50px;} li#search > ul {width:100px;}的宽度相匹配。

如何设计一个搜索面板，如仅使用css mashable

2 个答案: