How do I make the href that is inside my div work with Focus?

Asked

Viewed 463 times

5

I have a list that when you click on an item it receives a Focus and appears a div with information. One of this information has a link but when I click on it, my div closes and does not open the page.

Follows the code...

FULL HTML:

<html>
    <head>
        <style>
            li .faq-content-answer{
                display: none;
                padding: 0px;
            }
            li:focus .faq-content-answer{
                display: block;
            }
            .faq-content-answer p{
                display: none;
            }
            li:focus .faq-content-answer p{
                display: block;
                padding: 18px 0 20px 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li tabindex="0">Como me cadastrar?
                <div class="faq-content-answer"><p>Para se cadastrar, <a target="_blank" href="link-clicavel">Clique aqui</a>
                Nós enviaremos um e-mail com as suas informações e se elas estiverem corretas, é só confirmar a aproveitar!</p>
                </div>
            </li>
        </ul>
    <body>
</html>

How can I make href work when I click?

html css css3

  • What would be "link-clickable" inside href? shouldn’t be the way you want to go?

  • Exactly! I put a loose link to show that it doesn’t work.

  • Can you put the complete code within the specific location for the codes ? <> not in the {}

  • Edited post. HTML looks like this msm.

  • Check it out @Ikaro Pinheiro...

  • funfou... Let me know if I can’t sleep...

  • hehe, it worked, yeah, vlw bro.

Show 2 more comments

2 answers

1


See if that’s it, boss:

li{
display:inline:block;
}
.faq-content-answer {
    display: none;
    position: absolute;
    
}


.faq-content-answer a {
   
    display: block;
}


.faq-content-answer a:hover {background-color: #f1f1f1}


li:hover .faq-content-answer {
    display: block;
}      
    <body>
        <ul>
            <li >Como me cadastrar?
                <div class="faq-content-answer"><p>Para se cadastrar, <a target="_blank" href="link-clicavel">Clique aqui</a>
                Nós enviaremos um e-mail com as suas informações e se elas estiverem corretas, é só confirmar a aproveitar!</p>
                </div>
            </li>
        </ul>
    <body>

If you like adapt, GL ;)!

0

Would that be something like this? Using the jQuery library.

$('#div-clicavel').on('click', function() {
  window.location.href = "https://www.google.com/";
});
<div id="div-clicavel">Clique Aqui</div>

  • The answer is feasible, but the intention is not to cause this error, and the tag to act normally on the nature of it.

  • 1

    I do not understand what you mean by "cause this error" this above code contains no errors.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.