CSS not working after have clicked on filters

  • Resolved levrden

    (@levrden)


    3 years, 11 months ago

    Hi !
    I am trying the free version of vp, and i have to admit it is the best and complete portfolio i have ever seen !

    After have tried some stuff with taxonomy, i wanted to add some CSS
    I want a “hide evertyhing but” behavior on the tiles

    So here is my CSS :

    .vp-portfolio__items > article{
    transition-timing-function: ease;
    transition: 0.5s;
    }
    .vp-portfolio__items:hover > article{
    opacity: 0.2;
    transition-timing-function: ease;
    transition: 0.5s;
    }
    .vp-portfolio__items:hover > article:hover{
    opacity: 1.0;
    }

    It works well at the beginning, but if i click on filter, it doesn’t work anymore. And The only way to make it work back is to refresh the page It doesn’t work if i go back to the “All” filter

    As these CSS values shouldn’t change, i don’t understand why it doesn’t work. I have made some borders in the same css editor, both for .vp-portfolio__items and article and it works well…

    Do you have any idea on what is the problem ?

    Thanks !

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author nK

    (@nko)

    Hey.

    I don’t see any example by your URL. If you can provide a working example, please, keep it online until I test it.

    Regards, nK.

    Thread Starter levrden

    (@levrden)

    To solve the problem, i just did it using jquery, thanks to @nko !

    No need to apply again when you have filtered the vpf

    /*Lorsque les éléments du portfolio sont survolés par la souris, on s'adresse aux articles */
jQuery(".vp-portfolio__items").hover(function(){
    /*et on leur attribue des propriétés de transition, ainsi qu'une opacité faible*/
  jQuery(this).children("article").css("opacity", "0.2");
  jQuery(this).children("article").css("transition-timing-function", "ease");
  jQuery(this).children("article").css("transition", "0.5s");
  
  /*Sauf pour l'article qui est lui-même survolé*/
    jQuery("article").hover(function(){
      jQuery(this).css("opacity", "1");
      }, function(){
      jQuery(this).css("opacity", "0.2");
      
    });
  }, function(){
      /*Si le portfolio n'est pas survolé, on redonne à tous les articles une opacité normale*/
  jQuery(this).children("article").css("opacity", "1");
});

/*Insérer des propriétés de transition aux articles, qui sont les enfants de .vp-portfolio-items*/
jQuery(".vp-portfolio__items")(function(){
  jQuery(this).children("article").css("transition-timing-function", "ease");
  jQuery(this).children("article").css("transition", "0.5s");
  });
    • This reply was modified 3 years, 8 months ago by levrden.
    • This reply was modified 3 years, 8 months ago by levrden.
    • This reply was modified 3 years, 8 months ago by levrden.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS not working after have clicked on filters’ is closed to new replies.

Tags