Use label instead of href

Asked

Viewed 656 times

0

I have the following css

* {
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    list-style: none;
    border: rgb(0,0,0) 1px solid;
}
ul li {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    border: rgb(0,0,0) 1px solid;
}
ul li a {
    display: none;
}
ul li label {
    display: block;
    width: 80%;
    height: 80%;
    margin: 0 auto;
    margin-top: 3px;
    border: rgb(0,0,0) 1px solid;
    background-color: rgb(200,200,200);
}
ul li a:hover + label {
    outline: rgb(33,180,208) 4px solid;
    background-color: #F00;
    border-color: #CCC;
}

And the html

<ul>
  <li> <a href="?linkA" name="linkA" id="linkA"></a>
    <label for="linkA">linkA</label>
  </li>
  <li> <a href="?linkB" name="linkB" id="linkB"></a>
    <label for="linkB">linkB</label>
  </li>
  <li> <a href="?linkC" name="linkC" id="linkC"></a>
    <label for="linkC">linkC</label>
  </li>
</ul>

My goal is to hide the href and use the label in the form of bloco to give a estilo at the link.

But when I click on label is not firing the href.

Where am I going wrong?

html css html5 css3
  • 2

    Why not apply the style directly on the link instead?!

  • You can either use css directly on the link, or through Javascript trigger the click on the link by clicking on the label.

  • true. but for didactic effect, because it did not work on the link as with type text?

  • 1

    The <a> tag is not a labelable element, so the label cannot reference it, the list of labelable elements can be obtained here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable

  • got it: thank you

1 answer

1


Puts the style on the link.

ul li a {
display: block;
width: 80%;
height: 80%;
margin: 0 auto;
margin-top: 3px;
border: rgb(0,0,0) 1px solid;
background-color: rgb(200,200,200);
}
ul li a:hover + a {
outline: rgb(33,180,208) 4px solid;
background-color: #F00;
border-color: #CCC;
}

Browser other questions tagged html css html5 css3

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