Html button when mouse

Asked

Viewed 75 times

0

I’m having a problem making a knob overhang when passing the mouse.

<td id="Consulta" class="Title"  > <a id="link_abre" href="consultas.html">
<img id="Consulta" src="images/Consulta.PNG" width="65px" height="65px"  
onclick="window.open(filtro.php)"  style="vertical-align: middle; padding-right: 8px;">

Consultas&nbsp;&nbsp;</a>

inserir a descrição da imagem aqui

I want to change the first one to a similar one with the second button. By passing the mouse around like that

html

1 answer

2


The CSS selector :Hover I think the best option.

Example: :Hover transitional

HTML:

<img class='dizzyimg' src="http://img3.wikia.nocookie.net/__cb20130222162701/coasterpedia/images/thumb/5/58/Magnifying_glass.png/240px-Magnifying_glass.png">

CSS:

 .dizzyimg {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
    border: 1px solid White;
}

 .dizzyimg:hover {
 -webkit-filter: hue-rotate(180deg);
    border: 1px outset #e0e0e0;
}

Click here to see the Jsfiffle for this example.

  • Only one question. When you show the projections they do not appear in the center. Is there any way to correct this? http://jsfiddle.net/kxtC7/

Browser other questions tagged html

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