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><linkhref="style.css"rel="stylesheet"type="text/css" /></head><body><inputclass="search"type="text"placeholder="Search..." /><ulclass="results"><li><ahref="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"