Add onclick with css pseudo-element after

问题

Is it possible in my css file to do something like that?:

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

I want to add after all instances of myclass a clickable text, in the css style sheet.

回答1:

Is it possible in my css file to do something like [see code above]?

The important question to ask is why.

HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.

CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.

JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.

Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.

CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.

If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.

jQuery makes this very simple:

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);

回答2:

Well,

using expresison it might actually be possible for internet explorer only.

Otherwise:

No. Not at all, thats not what css is made and intendet for.

回答3:

If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:

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

We need some stylesheet:

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

And a code:

<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");};    }
</script>

回答4:

Use jQuery's After:

http://jsfiddle.net/PCRnj/

回答5:

No,but you can do like this

In html file add this section

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

In css you can do like this

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

Hope it will help you

来源：https://stackoverflow.com/questions/8301476/add-onclick-with-css-pseudo-element-after

标签

javascript

html

css

pseudo-element