Cursor: указатель на псевдоэлемент IE

Я реализую кнопку закрытия элемента, содержащего текст с CSS. Кнопка закрытия генерирует контент из псевдоэлемента с помощью content:'X';. Мне нужно, чтобы курсор стал указателем на "X", поэтому я использовал:

cursor:pointer;

Он отлично работает в Chrome и Firefox, но, похоже, он не работает в Internet Explorer (тестирование на IE11 Windows 7).

DEMO (тест в IE)

Я также пробовал с cursor:hand;, но это не решает проблему. Как я могу сделать курсор указателем при наведении "X", но не на текст div?

Соответствующий код:

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

<div>some text</div>

Ответы

Ответ 1

Я действительно опаздываю в игру, но я только что решил решить эту проблему.

Это решение позволяет указать указатель на дочерний элемент, а сохранить курсор по умолчанию для родительского элемента.

(см. принятый ответ здесь для решения, которое не включает в себя сохранение указателя родительского элемента по умолчанию: курсор: указатель не работает: после элемента?)

Прежде всего, для этого хакерского решения вы должны отказаться от возможности взаимодействовать с родительским элементом с помощью мыши.

Задайте родительский элемент cursor: pointer.

Затем установка родительского элемента в pointer-events: none позволит вам "щелкнуть/навести" родительский элемент.

Затем, для псевдоэлемента, просто повторно включите события указателя с помощью pointer-events: auto.

Voila!

div{
    font-size:2em;
    position:relative;
    display:inline-block;
    
    /* remove ability to interact with parent element */
    pointer-events: none;

    /* apply pointer cursor to parent element */
    cursor:pointer;

    /* make it more obvious which is child and which parent for example*/
    background: darkred;
}
div::before{
    content:'X';

    display:block;
    text-align:right;

    /* restore ability to interact with child element */
    pointer-events: auto;        

    /* make it more obvious which is child and which parent for example*/
    width: 30px;
    text-align: center;
    background: white;
}

<div>some text</div>

Ответ 2

Я считаю, что он не работает в псевдоэлементах в 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;
}

Но чем не смысл использовать псевдокласс...

демонстрация

Ответ 3

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

DEMO

Ответ 4

демо

div{
    font-size:2em;
    position:relative;
    display:inline-block;
    border:1px solid #000;
    margin:20px;
    padding:20px;
}
div:after{
    cursor:pointer;
    display:block;
    position:absolute;
    height:20px;
    width:20px;
    top:-10px;
    right:-10px;
    content:'X';
    font-size:15px;
}

<div>
    some text
</div>

Ответ 5

Чтобы IE 7,8,9,10 вел себя как обычные браузеры, которые могут работать с псевдоселекторами, я всегда использую IE7.js, библиотеку JavaScript, чтобы заставить Microsoft Internet Explorer вести себя как браузер, совместимый со стандартами. Он исправляет многие проблемы HTML и CSS, связанные с Internet Explorer. Альтернативой будет modernizr.js, что является хорошей реализацией для получения псевдоселекторов, работающих с IE. Надеюсь, это поможет.