Use label instead of href

Question

Use label instead of href

Navigation

#1 by (1 votes)

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 href and use label as bloco to give estilo to link .

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

Where am I going wrong?

html html5 css css3

asked by anonymous 22.09.2017 / 18:09

1 answer

Connect PgAdmin via SSH Google Cloud Add content to a listview (Android)

score 1 · Accepted Answer

Place the style in 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;
}