Click anywhere in the li and run the href from the

Question

Click anywhere in the li and run the href from the

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

You can see that <a> is clickable, ie I click on it and it redirects me to another location for example, but I would like to know how I can click everywhere from <li> to occur redirection and not only in <a>

ul {
  list-style-type: none;
  text-align:center;
}

ul li {
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

ul li:hover {
  background: gray;
}

<ul>
  <li> <a href="#"> Um </a> </li>
  <li> <a href="#"> Dois </a> </li>
  <li> <a href="#"> Tres </a> </li>
</ul>

It does not matter what location I click within <li> it would execute href within <a>

html html5 css css3

asked by anonymous 27.01.2018 / 22:32

2 answers

1

Place the onclick event on li :

 ul {
      list-style-type: none;
      text-align:center;
    }

    ul li {
      width: 200px;
      height: 50px;
      border: 1px solid black;
    }

    ul li:hover {
      background: gray;
    }
    
    li { cursor: pointer; }

<ul>
  <li onclick="location.href = 'https://pt.stackoverflow.com/';"> Um </li>
  <li onclick="location.href = 'https://pt.stackoverflow.com/questions/272339/clicar-em-qualquer-local-do-li-e-executar-o-href-de-a';"> Dois </a> </li>
  <li onclick="location.href = 'https://pt.stackoverflow.com/questions/272336/validar-tamanho-da-senha';"> Tres </a> </li>
</ul>

27.01.2018 / 22:42

How to swap the SVG drawing for a PNG image after completing the animation? PHP + JSON Webservice - Reading array

score 1 · Accepted Answer

Expand the <a> for the entire area of <li> with CSS:

ul li a{
   display: inline-block;
   width: 100%;
   height: 100%;
}

Example:

ul {
  list-style-type: none;
  text-align:center;
}

ul li {
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

ul li:hover {
  background: gray;
}

ul li a{
   display: inline-block;
   width: 100%;
   height: 100%;
}

<ul>
  <li> <a href="javascript:alert('um')"> Um </a> </li>
  <li> <a href="javascript:alert('dois')"> Dois </a> </li>
  <li> <a href="javascript:alert('tres')"> Tres </a> </li>
</ul>