如何操作第一个先前的psuedo元素类属性 [英] how to manipulate first previous psuedo element class property

问题描述

 <   ul  >  
 <   li     class   = 标题hvr -underline-left-left >  1 <   / li  >  
 <   li     class   =  hvr-icon-forward >  2 <   / li  >  
 <   li     class   =  hvr-icon-forward > ;  3 <   / li  >  
 <   li     class   = 标题hvr-underline-from -left >  4 <   / li  >  
 <   li     class   =  hvr-icon-forward >  5  <   / li  >  
 <   li     class   =  hvr-icon-forward >  6 <   / li  >  
 <   / ul  > ;  

鼠标悬停（$（li.hvr-icon-forward）。悬停）我可以改变第一个元素的颜色（class = .hvr-underline-from-left）位于class = hvr-icon-forward

 $（  li.hvr-icon-forward）。悬停（
  function （）{$（ this ）。prevAll（  li.hvr-underline-from-left：first）。css（'  color '，' ＃006cb4'）}，
 
 < span class =code-keyword> function （）{$（ this ）。prevAll（  li.hvr-underline-from-left：first）。css（'  color'，'  black'）} 
 
）; 
}）; 
 

但是如何更改第一个元素的psuedo元素的css属性，它位于class = hvr-icon-forward
$ b $之上b

。 hvr-underline-from-left  {
  display  ：  inline-block;  
  vertical-对齐 ：  middle;  
  -webkit-transform  ：  translateZ（0）;  
  transform  ：  translateZ（0）;  
 < span class =code-attribute> box-shadow  ：  0 0 1px rgba（0,0， 0,0）;  
   -  webkit-backface-visibil ity  ： 隐藏;  
 背面可见性 ： 隐藏;  
  -moz-osx-font-smoothing  ： 灰度;  
 < span class =code-attribute> position  ：  relative;  
 < span class =code-attribute> overflow  ：  hidden;  
} 
。 hvr-underline-from-left：before  {
  content  ： ;  
  position  < span class =code-keyword>： 绝对值;  
  z-index  ：  -1;  
  left  ：  0;  
 正确 ：  100％;  
  bottom  ：  0;  
  background  ： ＃2098d1;  
 < span class =code-attribute> height  ：  4px;  
 < span class =code-attribute>  -  webkit-transition-property  ：  right;  
  transition-property  ：  right;  
   -  webkit-transition-duration  ：  0.3s;  
  transition-duration  ：  0.3s;  
   -  webkit-transition-timing-function  ：  缓出;  
  transition-timing-function  ： 缓出;  
} 

我想改变财产（右：0;从右边：100％;）在上面的鼠标悬停逻辑

解决方案

（li.hvr中的伪元素类（.hvr-underline-from-left：before）中-icon-forward）。悬停）我能够改变第一个元素的颜色（class = .hvr-underline-from-left），它位于class = hvr-icon-forward

之上

（ li.hvr-icon-forward）。悬停（
function （）{

< blockquote>（ this ）。prevAll（ li.hvr -underline-left-left：first）。css（' color'，< span class =code-string>' ＃006cb4'）}，

function （）{

<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

$("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

   .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

解决方案

("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

("li.hvr-icon-forward").hover( function () {

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

这篇关于如何操作第一个先前的psuedo元素类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！