[ad_1]
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 を操作できると考えていた理由がよくわかります。
これが役立つことを願っています!
乾杯
[ad_2]
コメント