Leave click on A throughout the LI

Asked

Viewed 216 times

1

I have the HTML:

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

I want the click of a is active throughout the 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 this, because the li is a large square and the a is just the text.

css
  • 2

    The best in my view would be to format the A as a block so as to occupy the square instead of just styling the read.

  • @Bacco was that same guy, I don’t know how I didn’t think of it before, thanks

  • @Bacco formal response ;)

  • @Felipe if you can solve this way and think the result was good, consider posting as an answer to leave complete the post.

  • (just don’t forget to pass the padding inside the A)

2 answers

4

Since your <li> has defined width and height, simply define the <a> with display: block occupying 100% width and height:

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 defined the color of background in the <a> to show that it is occupying 100% of the <li>.

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;
 }

Browser other questions tagged css

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