Click on A throughout LI

1

I have HTML:

<li class="duoBtsAnalise"><a href="#">Análises de Risco</a></li>

I want the a click to be active on all li .

My CSS:

  .duoBtsAnalise {
    background-image: url("../imagens/duoAnalise.jpg");
    background-repeat: no-repeat;
    background-position: center;
    width: 183px;
    height: 182px;
    float: left;
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    color: white;
    padding-top: 135px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    display: block;

}

I'm asking for this because the li is a large square and the a is just the text.

    
asked by anonymous 12.01.2015 / 12:56

2 answers

4

Since your% w / o% has width and height defined, you would only need to set% w / w% w /% w /

li {
    width: 250px;
    height: 35px
}

a {
    background: skyblue;
    display: block;
    height: 100%;
    width: 100%
}

/* Não importante */
a {line-height:35px;text-align:center;color:#fff;text-decoration:none}
<li>
    <a href='#'>Análise de riscos</a>
</li>

I set the color of background in <li> to show that it is occupying 100% of <a> .

    
12.01.2015 / 13:59
0

try this:

.duoBtsAnalise a {
  background-image: url("../imagens/duoAnalise.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width: 183px;
  height: 182px;
  float: left;
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  color: white;
  padding-top: 135px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
 }
    
21.01.2015 / 21:15