I need to make js so that when you hover the mouse over the photo, the color of the border changes (and when you leave the photo, the color that was returned). I did it successfully:

$('.logo_js').hover(function () { $(this).css({ "border-color": "#FF80FF" }); }, function () { $(this).css({ "border-color": "#DFDFDF" }); });

But I need to make it so that when the user clicks on the photo, the color turns green. This does not work for me, since when the focus is lost, the color returns to #DFDFDF.

How to make the colors change when you hover, and when you press the color of the border turned green?

    3 answers 3

     $('.logo_js').hover(function () { if ($(this).hasClass('clicked')) return; $(this).css({ "border-color": "#FF80FF" }); }, function () { if ($(this).hasClass('clicked')) return; $(this).css({ "border-color": "#DFDFDF" }); }); $('.logo_js').on('click', function() { $(this).toggleClass('clicked'); }); // css: .logo_js.clicked { border-color: #00ff00; } 
       $('.logo_js').click(function () { $(this).css({ "border-color": "#зеленый" }); }

      maybe so?

      but you need to check that after clicking does not work hover

      Well, when you click on a photo, you can add a class to it, say "hoveroff", then when

       $('.logo_js').hover(function () {

      Check if logo_js has hoveroff style, if there is something to do nothing, and if not, to do something. actually remove this style by clicking on the picture again.

      • But how to make sure that after pressing does not work hover - Arthur Lodenev
      • updated the answer - Artem

      Let's google CSS, especially a:hover , a:active and a:visited .

      UPDATED

      css is not needed here!

      I would say that js is not needed here. ;) Ok, here's another option.

      html:

       <a class="someclass clickOnce"></a>

      css:

       .someclass{border-color:green} .someclass:hover, .clickOnce:hover{border-color:red} .clickOnce{border-color:blue}

      js:

       $('.clickOnce').live('click', function(){$(this).removeClass('clickOnce');});
      • css is not needed here! - Arthur Lodenev