background-image css clickable. Is there a way?

Asked

Viewed 442 times

2

can make a background-image css clickable?

Follow the code I have:

position: relative;
width:140px;
font-family: Arial, Verdana; 
font-size: 15px; 
padding: 5px; 
background-image:url(../../img/buscar-icon.png);
background-repeat:no-repeat;
background-position:right;
  • With javascript is possible,

  • how???

  • 1

    Clickable how? What is to happen at the click? Any element is clickable, but the background image itself is not.

1 answer

3

Maybe you’re talking about adding this to css:

cursor:pointer

If you need to add an action only when the click is executed, then use :active

.element:active{}

Example:

.clicavel{
   height: 150px;
   width: 150px;
   background-color: lime;
   cursor: pointer;
   transition: background-color 400ms ease;
   justify-content: center;
   align-items: center;
   display: flex;
   text-align: center;
}

.clicavel:active{
     background-color: steelblue;
}
<div class="clicavel">
   Clique e segure
</div>

Browser other questions tagged

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