Question

我遇到了谷歌搜索无法解决的问题。我有一个静态HTML：

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input class="search" type="text" placeholder="Search..." />
    <ul class="results">
        <li><a href="google.com">Google it</a>
        </li>
    </ul>
</body>

和css文件：

.search:focus + .results { display: block; }

.results {
    display:none;
}

当我将textBox聚焦时显示ul元素，但是当我尝试点击链接时，它就会消失。请解释为什么会发生这种情况。

Answer 1

我有一个纯粹的CSS解决方法。问题不在于链接，而是在未聚焦输入时隐藏它的事实。因此，我改进了您的CSS选择器，以在:hover标记上包含ul伪类。工作示例：

.search:focus + .results, ul:hover { display: block; }

.results {
    display:none;
}

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input class="search" type="text" placeholder="Search..." />
    <ul class="results">
        <li><a href="google.com">Google it</a>
        </li>
    </ul>
</body>

Answer 2

OP。我已经使用jQuery在点击输入框时显示列表。它将使列表保持不变。

$( ".search" ).click(function() {
  $( ".results" ).show();
});

并将css更改为

.results {
    display: none;
}

http://jsfiddle.net/5hmfwdvc/

一旦取消对焦输入，它就会缩回CSS，使列表显示出来。 jQuery解决了这个问题。

使用css时链接不起作用

2 个答案: