使用css時鏈接不起作用

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選擇器，在ul標簽上包含:hover偽類。 工作范例：

 .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 個解決方案

解決方案1
4 已采納 2015-07-05 19:46:59

解決方案2
1 2015-07-05 19:42:50

使用css時鏈接不起作用

問題描述

2 個解決方案

解決方案1 4 已采納 2015-07-05 19:46:59

解決方案2 1 2015-07-05 19:42:50

解決方案1
4 已采納 2015-07-05 19:46:59

解決方案2
1 2015-07-05 19:42:50