使用CSS时链接无法工作

Question

使用CSS时链接无法工作

4

我遇到了一个问题，通过谷歌搜索无法解决。我有一个静态的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;
}

当我聚焦在文本框上时，它会显示ul元素，但是当我试图单击链接时，它就消失了。请解释一下为什么会发生这种情况。

- user3260312

只有当.search元素获得焦点时，您的列表才可见。当您单击链接时，该元素失去焦点，列表项在接收到单击事件之前消失。 - Antiphon0x

2个回答

1

我使用了jQuery来实现在单击输入框时显示列表。这将使列表保持展开。

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

并将 CSS 更改为

.results {
    display: none;
}

http://jsfiddle.net/5hmfwdvc/

一旦您取消输入焦点，它将撤回CSS，使列表显示。jQuery可以解决这个问题。

- Billy Purvis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TechWisdom · Accepted Answer

我有一个纯CSS的解决方法。问题不在于链接本身，而是当输入框失去焦点时链接被隐藏了。因此，我改进了你的CSS选择器，在

.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>