Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Search

Links Are Not Working While Using Css

Post a Comment
I've faced a problem which I couldn't solve by Googling. I've got a static HTML: <

Solution 1:

I have a pure CSS workaround. The problem is not with the link, but with the fact that it is being hidden while unfocusing the input. So I improved your CSS selector to include :hover pseudo-class on the ul tag. 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>

Solution 2:

OP. I've used jQuery to show the list on click of the input box. It will make the list stay. 

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

and changed css to 

.results {
    display: none;
}

http://jsfiddle.net/5hmfwdvc/

Once you un-focus the input, it'll retract the CSS making the list being shown. jQuery solves this.


Post a Comment for "Links Are Not Working While Using Css"