javascript - jquery の 1 つの html 要素の後に html 要素を追加したいですか? Cssで可能ですか？

Question

タブのデザインがあります。下矢印で識別されるアクティブなタブ。マウスをホバーしたときにのみその矢印を作成したい。その矢印をすべてのタブに配置したくありません。下の画像を参照してください。css（疑似クラスの後または前にある可能性があります）またはjqueryで可能ですか。

ありがとう。

Answer 1

個人的には CSS の機能についてはよくわかりませんが、JQuery を使用すると確実に可能です。.hover()

JS

$( "li.menu_item" ).hover(
 function() {
  $( this ).append( $( "<span class='arrow'></span>" ) );
 }, function() {
  $( this ).find( "span:last" ).remove();
 }
);

http://api.jquery.com/hover/を見てください

Answer 2

cssでわかる限り、新しいhtml要素を追加することはできません。特定のタグ、ID、またはクラスのスタイルを記述できます。

ページ内で既に html 構造をコーディングできます (css-> display:none にします)。:hover のような CSS イベントでは、それを表示:ブロックできます。

しかし、Jquery では、次の方法でそれを行うことができます。

以前のJquery

Jquery After

または .append() メソッドを検索します

Answer 3

:after and :before疑似要素を使用して形状を追加できます。