Disable and keep hover in click

Question

Disable and keep hover in click

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have three columns in one of this type

<td align="center" height="240" width="380" >
  <img src="imagens/modelo3_thumbnail.png" alt="" class="imagemModelo">                
</td>

In my JS, I want the user to place the mouse on top of the event, which causes the size of the image to grow:

  $(".imagemModelo").hover(
    function(){$(this).animate({'width': '372px', 'height':'224px'}, 100);},   
    function(){$(this).animate({'width': '362px', 'height':'214px'}, 100);}
)

However, I would like that when the user clicked on the image, it would remain the same size, so I added the following after the hover call:

.click(function(e){ 

        $(".imagemModelo").off("hover");
        ativaItemModelo($(this));

        e.preventDefault();
    }
);

function ativaItemModelo(modelo){
    modelo.css("width","372px");
    modelo.css("height","224px");
}

However it is not working, when the user takes the mouse it returns to normal size. I do not know what else to do. I saw some answers in stackoverflow in English but none of the solutions worked out the effect I wanted it to be. Could you help me?

javascript html jquery

asked by anonymous 06.09.2017 / 19:36

3 answers

0

You have to use css along with that. The hover is by css:

creates a .css style file for example, or put it in a < style >

.imagemModelo:hover{
    'width': '372px';
    'height':'224px';
    transition-duration: 2s;
}

and ready, because the click of one and hover of the other are independent, I have tested here and it works. See you later!

06.09.2017 / 19:56

0

To disable the hover instead of using .off("hover") you have to use $(".imagemModelo").off('mouseenter mouseleave')

Ref: link

06.09.2017 / 20:04

Navigation Drawer - Change color menu Haversine formula for SQL SERVER

score 1 · Accepted Answer

I've done an example with DIV's.

$(".divItem").hover(
  function() {
    if(! $(this).hasClass("clicked"))
      $( this ).animate({'width': '120px', 'height':'120px'}, 100);
}, function() {
    if(! $(this).hasClass("clicked"))
      $( this ).animate({'width': '100px', 'height':'100px'}, 100);
}
);

$(".divItem").click(function(){
  if($(this).hasClass("clicked"))
    $(this).removeClass("clicked");
  else
    $(this).addClass("clicked");
})

.divItem {
  height:100px;
  width:100px;
  border:1px solid #000;
  background:#00ff00;
  margin:5px;
}

.clicked {
  background:#00e000;
  height:120px;
  width:120px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="divItem"></div>
<div class="divItem"></div>
<div class="divItem"></div>