Использовать javascript для нажатия на псевдоэлемент?

мне интересно, Как включить нажатием на :before псевдо-элемент (оранжевая часть div на jsfiddle I ссылка ниже). Я читал, что, поскольку псевдо-элементы не находятся в DOM, вам понадобится взломать это. К сожалению, я не могу найти существующий Stackoverflow Q&A, который фактически показывает рабочий код.

ссылка:http://jsfiddle.net/Vv6Eb/4/

HTML:

<div></div>

CSS:

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left; 
}

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}
11
css javascript jquery pseudo-element

4 ответов

обходным путем для этого было бы динамически добавлять <span> к элементу и присвоению ему метода click. как эта скрипка.

var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);

в CSS

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left;
}

div span { content:""; display:block;
    padding:5px; background-color:#f60; border:2px solid white;
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
9

Если вы знаете, где должен быть круг, вы можете использовать тригонометрию, чтобы увидеть, находится ли щелчок внутри круга:http://jsfiddle.net/Vv6Eb/19/

$("div").click(function(e){
    var $me = $(this),
        width = $me.outerWidth(),
        height = $me.outerHeight(),
        top = $me.position().top,
        left = $me.position().left;

    var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));

    if (len < 10)
        alert('ding');
});​
16

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

что то вроде этого должно работать:

var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);

и CSS:

.parentDivToOrangeCircle { position:relative; background-color:#333;
    padding:20px; margin:20px; float:left; 
}

.orangeCircle {
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}
2

моя цель была решена другим обходным путем, который просто добавляет дочерний DIV. Упаковка всех дочерних элементов внутри родителя в этот новый дочерний DIV:

мой рабочий образец так же, как постановка задачи: См. Fiddle

HTML-код:

<div class="parentDiv">
    :before
    <div class="childDiv">
        <!-- child elements -->
    </div>
</div>

**Примечание: игнорировать :before в HTML, просто показывая, чтобы понять.

CSS: 

div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}

div.childDiv{padding:20px; margin:0}

jQuery:

jQuery(document).ready(function($){
    $('div.parentDiv').click(function(e){
        if( $(e.target).closest('.childDiv').length==0 ){
            //so clicked on psudo :before element!
            //do your work here ;)
            alert('Psudo :before element is clicked!');
        }
    });
});
0