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

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

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

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

Источник

4 ответа

Решение

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

нет

Важный вопрос, чтобы спросить, почему.

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);
Источник

Что ж,

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

Иначе:

Нет. Это совсем не то, что сделано и предназначено для CSS.

Источник

Если что-то можно сделать с помощью 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>
Источник

Используйте jQuery's After:

http://jsfiddle.net/PCRnj/

Источник

Нет, но вы можете сделать это

В HTML-файл добавить этот раздел

<div class="arrow">
</div>

В CSS вы можете сделать это

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

Надеюсь, это поможет вам

Источник
Другие вопросы по тегам