web-dev-qa-db-ja.com

疑似要素のカーソル：ポインタIE

CSSを使用してテキストを含む要素に閉じるボタンを実装しています。閉じるボタンは、content:'X';の疑似要素から生成されたコンテンツです。その「X」のポインタになるためにカーソルが必要なので、次を使用しました。

cursor:pointer;

ChromeおよびFirefoxでは正常に動作しますが、Internet Explorerでは動作しないようです（IE11 Windows 7でテスト）。

[〜＃〜] demo [〜＃〜]（IEでテスト）

cursor:hand;も試してみましたが、問題は解決しません。 divのテキストではなく「X」にカーソルを合わせながらカーソルをポインタにするにはどうすればよいですか？

関連コード：

div{
    font-size:2em;
    position:relative;
    display:inline-block;
}
div::before{
    content:'X';
    cursor:pointer;
    display:block;
    text-align:right;
}
<div>some text</div>

-編集-

マークアップで子または兄弟を作成し、それにcursor:pointer;を適用しても機能することは承知していますが、マークアップを最小限に抑え、意味値がないため、閉じるボタンに疑似要素を使用したいと思います。

cssinternet-explorercursorpseudo-element
18
web-tiki

IEの疑似要素では機能しないと思います。私が使用しているのは、メイン要素にcursor: ponterを追加することです。

cursor: pointerを疑似要素のみに追加する必要がある場合、唯一の方法は子要素を追加することです。

お気に入り：

<div><span></span>some text</div>

div{
   font-size:2em;
   position:relative;
   display:inline-block;
}
div > span{
   cursor:pointer;
}
div > span::before{
   content:'X';
   display:block;
   text-align:right;
}

しかし、疑似クラスを使用しても意味がありません...

デモ

2
LJ Wadowski

HTML：

 <div>
        <div id="closebutton">
            X
        </div>
        some text
    </div>

css：

div{
    font-size:2em;
    position:relative;
    display:inline-block;
}
div#closebutton{
    cursor:pointer;
    display:block;
    text-align:right;
}

[〜＃〜]デモ[〜＃〜]

1
ruben450