Добавить onclick с псевдоэлементом css после

Возможно ли в моем файле css сделать что-то подобное?:

.myclass:after{
   content:"click me";
   onclick:"my_function()";
 }

Я хочу добавить после всех экземпляров myclass кликабельный текст в таблице стилей css.


javascript html css pseudo-element
person Oli    schedule 28.11.2011    source источник
comment
Если это невозможно, это ответ, который я искал. Я знаю, как это сделать с помощью jQuery.   -  person Oli    schedule 28.11.2011
comment
Проверьте этот ответ: stackoverflow.com/a/23243996/1136132   -  person joseantgv    schedule 19.07.2016

Ответы (4)


arrow_upward
56
arrow_downward

Возможно ли в моем файле CSS сделать что-то вроде [см. код выше]?

No

Важный вопрос: почему.

HTML управляет данными на веб-странице. Любой CSS или JS указывается через HTML. Это Модель.

CSS контролирует стили, нет никакой связи между CSS и HTML или JavaScript. Это представление.

JavaScript контролирует взаимодействия на веб-странице и связывается со всеми без исключения узлами DOM. Это Контроллер.

Из-за этой структуры MVC: HTML принадлежит .html файлам, CSS принадлежит .css файлам, а JS принадлежит .js файлам.

Псевдоэлементы CSS не создают узлы DOM. У JavaScript нет прямого доступа к псевдоэлементу, определенному в CSS, и нет способа прикрепить событие к указанным псевдоэлементам.

Если у вас есть заданная структура и вы не можете добавить дополнительный контент, необходимый для создания новых ссылок в HTML, JavaScript может динамически добавлять необходимые новые элементы, которые затем можно стилизовать с помощью CSS.

jQuery делает это очень просто:

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
person zzzzBov    schedule 28.11.2011
comment
ты, мой друг, настоящий художник - person wayofthefuture; 20.03.2015
comment
Если бы события щелчка на псевдоэлементах были возможны, это было бы удобно, когда вам нужно, чтобы кнопка отображалась только внутри последнего элемента. В форме с клонируемыми строками полей/наборов полей псевдо-кнопка [+] с абсолютным позиционированием, выровненная по правому краю и соответствующая высоте строки, может появиться в последней строке, а не после/под ней: div.field-row:last-of-type:after {} ...then вам не придется беспокоиться о том, что jQuery необходимо отслеживать элемент и постоянно перемещать его в последнюю строку всякий раз, когда добавляются новые строки, особенно если кнопка должна соответствовать высоте содержащей ее строки без JS. - person purefusion; 14.09.2015

arrow_upward
1
arrow_downward

Что ж,

используя выражение, это может быть возможно только для Internet Explorer.

В противном случае:

Нет. Вовсе нет, это не то, для чего создан и предназначен css.

person The Surrican    schedule 28.11.2011

arrow_upward
0
arrow_downward

Если что-то можно сделать с помощью jQuery, то наверняка можно и без этого. Давайте посмотрим на модель данных:

<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>

Нам нужна таблица стилей:

<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>

И код:

<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");};    }
</script>
person Zoltán Gergely Kis    schedule 29.11.2019

arrow_upward
-2
arrow_downward

Используйте jQuery После:

http://jsfiddle.net/PCRnj/

person Tomas Reimers    schedule 28.11.2011
comment
:after (CSS) добавляет псевдоэлемент в выбранные элементы, .after() (jQuery) добавляет новый элемент сразу после выбранных элементов. .append будет правильным эквивалентом. - person zzzzBov; 29.11.2011