cursor: pointer on pseudo element IE

Question

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

cursor:pointer; 

Он отлично работает в Chrome и Firefox, но это, кажется, не работает в Internet Explorer (тестирование на IE11 окна 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>

--EDIT--

Я знаю, что делает ребенка или родственный в разметке и применяя cursor:pointer; к он будет работать, но я хотел бы свести к минимуму разметку и использовать псевдоэлемент для закрытия bu tton, поскольку он не имеет семантической ценности.

Answer 1

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

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

(см принятый здесь ответ на решение, которое не включает в себя сохранение курсора по умолчанию родительского элемента: cursor: pointer doesn't work on :after element?)

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

Установите родительский элемент на 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>

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

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

demo

Answer 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

Answer 4

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

Answer 5

демо

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>