Click here to Skip to main content
15,882,209 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
HTML
<ul>
<li class="heading  hvr-underline-from-left">1</li>
<li class="hvr-icon-forward">2</li>
<li class="hvr-icon-forward">3</li>
<li class="heading  hvr-underline-from-left">4</li>
<li class="hvr-icon-forward">5</li>
<li class="hvr-icon-forward">6</li>
</ul>

On mouse hover($("li.hvr-icon-forward").hover) I am able to change the color of the first element (class=.hvr-underline-from-left) which lies above class=hvr-icon-forward

JavaScript
$("li.hvr-icon-forward").hover(
                          function () { $(this).prevAll("li.hvr-underline-from-left:first").css('color', '#006cb4') },

                         function () { $(this).prevAll("li.hvr-underline-from-left:first").css('color', 'black') }

                      );
          });

But how can i change the css property of the first element's psuedo element which lies above class=hvr-icon-forward
CSS
   .hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}



Exactly I want to change property( right: 0; from right:100%;) in pseudo element class (.hvr-underline-from-left:before) on above mouse hover logic
Posted
Updated 8-Aug-15 9:59am
v4

1 solution

Pseudo-elements are not really part of browser DOM - so they can't be targeted directly by JQuery.

Your code
$(this).prevAll("li.hvr-underline-from-left:first").css('color', '#006cb4')


only works because JQuery is using the CSS pseudo selector :first to evaluate and return an actual DOM element.

To achieve desired effect, you should actually look at using http://api.jquery.com/toggleclass/[^]

I totally get why you were thinking you could alter use .css() to manipulate the .hvr-underline-from-left:before.

Hope this helps out!

Cheers
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900