CODEWITHSUNDEEP
htmlcsspseudo-class
podliy16
podliy16

Reputation: 65

CSS. Link doesn't works with input:focus

There is fiddle with my problem.

As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. But I can't come up with solution.

I think it's very common problem, but I didn't found any information about this.

Thanks for any help.

CSS:

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

#results {
    display: none;
}

HTML:

<input id="search" type="text"/>

<ul id="results">
    <li><a href="/1"> First </a></li>
    <li><a href="/2"> Second </a></li>
    <li><a href="/3"> Third </a></li>
</ul>

Upvotes: 1

Views: 850

Answers (2)

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

I would suggest in your case to include also :hover pseudo class and make the #results object visible on hover.

Like this :

#results:hover {
    display: block;
}

You can check working demo.

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

Just add a hover method to #results:

#results:hover{display:block;}

http://jsfiddle.net/gc6L323f/3/

Upvotes: 3

Related Questions