1

我正在尝试构建一个类似于可混搭站点 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代码

4

2 回答 2

1

使用 Javascript 执行此操作可能会更好。也就是说，使用 CSS 实现您想要的效果并非不可能。

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

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

<li id="search">
    <div>Search</div>
    <ul>
        <li>
            <input type="text placeholder="search">
            <input type="submit" value="search">
        </li>
    </ul>
</li>

你的CSS可能是这样的：

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

您可以调整这些样式以匹配您自己的网站（我会这样做，但是您发布的 jsFiddle 有太多的 CSS 无法清除）。重要的是 的有效宽度（宽度 + 填充）li#search与 的宽度相匹配li#search > ul。

于 2013-06-08T17:50:06.213 回答
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......

于 2013-06-08T17:47:09.833 回答