【解決方法】最初の前の疑似要素クラスプロパティの操作方法

プログラミングQA

2023.01.09

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>

マウスホバー ($(“li.hvr-icon-forward”).hover) で、class=hvr-icon の上にある最初の要素 (class=.hvr-underline-from-left) の色を変更できます。 -前方

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') }

                      );
          });

しかし、class=hvr-icon-forward の上にある最初の要素の疑似要素の css プロパティを変更するにはどうすればよいですか?

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;
}

正確には、マウスホバーロジックの上の疑似要素クラス（.hvr-underline-from-left:before）のプロパティ（right：0; from right：100％;）を変更したい

解決策 1

疑似要素は実際にはブラウザー DOM の一部ではないため、JQuery で直接ターゲットにすることはできません。

あなたのコード

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

JQueryがCSS疑似セレクターを使用しているためのみ機能します ：最初 実際の DOM 要素を評価して返す。

目的の効果を得るには、実際に使用することを検討する必要があります http://api.jquery.com/toggleclass/[^]

.css() を使用して .hvr-underline-from-left:before を操作できると考えていた理由がよくわかります。

これが役立つことを願っています!

乾杯