Geek Answers Handbook

Links do not work when using css

I ran into a problem that I could not solve Google. I have static 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>

And css file:

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

.results {
    display:none;
}

It shows the ul element when I focus on the textBox, but when I try to click on the link, it just disappears. Please explain why this is happening.

+4
source share
2 answers

I have a workaround for CSS. The problem is not the link, but the fact that it is hiding without focusing the input. So I improved your CSS selector by including an alias :hoverin the tag ul. Working example:

.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>
Run codeHide result
+4
source

OP. I used jQuery to display a list when I click an input field. He will make the list stay.

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

and changed css to

.results {
    display: none;
}

http://jsfiddle.net/5hmfwdvc/

, CSS, . jQuery .

+1

More articles:


All Articles